Pseudo-elements can only be applied to the last “simple selector in a chain”, as the recommendation says. A simple selector is either the univeral selector (*) or a type selector (I tend to call them element selectors) followed by attribute, ID or pseudo-class selectors.
CSS2 has four of them:
- :first-line allows you to style the first line of a block element
- :first-letter allows you to style the first letter of a block element
- :before allows you to inject and style content before an element, block or inline.
- :after allows you to inject and style content after an element, block or inline.
p:first-line { /* this will work */ }
p:first-line span { /* this won’t work */ }
p.intro:first-line { /* this will work */ }
p:first-line.intro { /* this won’t work */ }
.intro:first-line { /* this will work */ }
#main:first-line { /* this will work */ }
body#about #content p.intro:first-line { /* this will work */ }
Because the pseudo-element is considered an element unto its own, the style can only be overridden by styling an elements that would be contained within the pseudo-element or by increasing the specificity on the selector. For example, look at the following HTML structure and its corresponding CSS:
<div id=”main”>
<p>CSS HOOK … </p>
</div>
#main p {color:#ccc;}
p:first-line {color:#333;}
The pseudo-element wins out and the first line is black and not gray. If you needed to override the style you’d have to increase the specifity. Like, if we wanted to override the style for an intro paragraph that was different from the rest of them.
p:first-child:first-line {font-size:2em}
Notes:
Internet Explorer only supports :first-line and :first-letter. The selectors :beforeand :after will not work — not even in version 7.
