CSS special classes, like “:-moz-placeholder”

Question

I've seen CSS styling along the following lines:

input::-webkit-input-placeholder {...}

or

input:-moz-placeholder {...}

And they raise a few questions for me:

• What are these things called? (I'm having trouble googling them.)
• Is there a comprehensive list somewhere of which ones are supported by which browsers?
• Which meta-CSS languages (Sass, Less, Stylus, etc) have support for these, if any?

Thanks!

Answer 1

The thing with one colon called pseudo-classes, it is used address different states of object (like :hover and ‘active).

Shot description and list can be found there: http://reference.sitepoint.com/css/css3psuedoclasses Description on w3.org: http://www.w3.org/TR/selectors/#pseudo-classes

The thing with 2 colons called pseudo-elements, it is used to autogenerate content or to style part of content like first letter of first line.

Description on w3.org: http://www.w3.org/TR/selectors/#pseudo-elements

There is lot of browser-specific extensions of this list through. That didn't documented in css3 standard.

You can find list for Mozilla's browsers here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions in the section "Pseudo-elements and pseudo-classes".

Can't find good list of Webkit pseudo-elements and -classes through.

Answer 2

They're called vendor specific properties, and they typically are a vendors version of a CSS3 format. Since CSS3 isn't a standard yet, technically any browser that implements them are implementing a vendor specific extension.

-moz mean Mozilla, aka firefox, etc.. -webkit means webkit based browsers, ie Safari, Chrome, Konqueror, etc.. -ms

See: http://reference.sitepoint.com/css/vendorspecific