Saturday, September 5, 2009

Pseudo Elements

* Pseudo elements allow us to extend our selectors so we can be more specific with what we would like to select.
* They allow us to match elements in our document that don't appear specifically in the document tree, e.g. the first letter of a paragraph.

First-letter
* p:first-letter {...} uses the pseudo element :first-letter to apply any CSS rules to the first letter of each paragraph.
* NB: In CSS1 and CSS2 the pseudo element is identified by a single colon, but in CSS3 it is identified by a double colon.

First-line
* p:first-line {text-transform:capitalize;} would make the first letter of each word of the first line a capital letter.
* If you adjust the size of the browser window the amount of text that fits on the first line would vary and the formatting would also adjust to the varying content.
* NB: Be aware that not all browsers support this property yet.

Selection
* Using the universal selector in association with this pseudo element, the CSS selector *:selection {...} would apply the rule(s) to any and every element in the document when it is selected by the user.
* The selection pseudo element only has two properties that can be used, 1. background and 2. color.
* NB: At the moment only Opera and Safari support this property.

No comments:

Post a Comment