CSS element specific pseudo element

Question

This might not be the right place to ask this question, but I will ask anyway and somebody can move it if I have chosen the wrong place to post.

I have read about the various pseudo elements that can be used to style 'fake' elements that don't actually exist. I know that there are ones like ':before' and ':after'.

I also know that there are others that are used for specific elements, like ::input-placeholder. Does anybody know of a reference that give details on all of the different pseudo elements, including those for specific elements?

I googled it and i can't find anything that does both the more 'generic' ones and the ones that are tied to a specific element.

http://www.w3schools.com/css/css_pseudo_elements.asp, and e.g. `::-webkit-input-placeholder` is used to style the HTML5 input placeholder attribute in Webkit: http://css-tricks.com/snippets/css/style-placeholder-text/. — snuffn, Aug 26 '12 at 08:54
@snuffn: That page is absolutely terrible. It munges pseudo-classes and pseudo-elements together in a single page called `css_pseudo_elements.asp`... really W3Schools? Oh wait, it's W3Schools. — BoltClock, Aug 26 '12 at 08:56
The annoying thing about pseudo-elements is that you're not going to find any of the new ones in the Selectors spec, since that spec only describes the selector syntax, as well as the pseudo-elements from CSS1 and 2. You'll only find the new ones... wherever. In various other CSS modules or even non-CSS documents. Because `::input-placeholder` is as you say an element-specific pseudo-element, I think it is somewhere in the HTML5 spec; I can't find it in any CSS module. — BoltClock, Aug 26 '12 at 08:57
@BoltClock: I couldn't find anything about it: http://dev.w3.org/html5/spec/single-page.html. I think that selector still has browser prefixes. — Blender, Aug 26 '12 at 09:00
The thing is that there are other element specific ones like one that lets you style the green part of a `` or ` — starbeamrainbowlabs, Aug 26 '12 at 09:05
@snuffn That reference does not cover the element specific ones — starbeamrainbowlabs, Aug 26 '12 at 09:06
@Blender: Then maybe it hasn't been specced yet. See, this is why it's so annoying :/ — BoltClock, Aug 26 '12 at 09:09

score 2 · Answer 1 · edited May 23 '17 at 12:20

There is no authoritative list of all pseudo-elements in CSS3, or constructs of CSS3 in general, because CS3 itself is a moving target, a collection of modules of very varying maturity. The W3C maintains just collections of links to the modules: http://www.w3.org/Style/CSS/current-work.en.html

The best compilation I’ve encountered is the MDN CSS Reference. But note that you need to follow the links to Mozilla and WebKit extensions, too, to find out what might be implemented in browsers.

In the specific case of ::input-placeholder, such a pseudoelement does not exist even in the drafts, but there are vendor prefixed versions, see question Change an input's HTML5 placeholder color with CSS.

CSS element specific pseudo element

1 Answers1