In CSS, there are certain selectors you can use that act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements.
CSS 2.1 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.
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.
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>Lorem ipsum ... </p></div>#main p {color:#555;}p:first-line {color:#000;}
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}
This rule has an element selector and a pseudo-class selector (which counts towards the specificity rules just as a regular class selector) which has more specificity than just the element selector used before. I used the pseudo-class :first-child to reiterate something important: the pseudo-element must be last in the declaration.
Caveats
Internet Explorer only supports :first-line and :first-letter. The selectors :before and :after will not work — not even in version 7.
From JavaScript, there's no way that I've found to gain access to these additional elements that have been pseudo-injected into the page. In fact, detecting that these styles are even being applied appears to be impossible in anything but Firefox.
CSS 2.1 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.
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.
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>Lorem ipsum ... </p></div>#main p {color:#555;}p:first-line {color:#000;}
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}
This rule has an element selector and a pseudo-class selector (which counts towards the specificity rules just as a regular class selector) which has more specificity than just the element selector used before. I used the pseudo-class :first-child to reiterate something important: the pseudo-element must be last in the declaration.
Caveats
Internet Explorer only supports :first-line and :first-letter. The selectors :before and :after will not work — not even in version 7.
From JavaScript, there's no way that I've found to gain access to these additional elements that have been pseudo-injected into the page. In fact, detecting that these styles are even being applied appears to be impossible in anything but Firefox.
Comments