8.2.3Pseudo Class Selector
Pseudo classes are similar to CSS classes, but they don’t appear in the XHTML source code. They are automatically applied to elements by the web browser, if certain conditions apply. These conditions can be related to the content, or to the actions that the user is carrying out while viewing the page. To distinguish pseudo classes from normal CSS selectors they all start with a colon.
:focus { background-color: yellow; } :hover { font-weight: bold; }
The first rule specifies that elements (typically input fields of a form) get a yellow background, if they have focus. The second rule specifies that all elements will appear in bold while the mouse cursor hovers over them.
The following table gives a brief overview of pseudo classes supported by most of today’s browsers:
:active | Matches an activated element, e.g. a link that is clicked. |
:first-child | Matches the first child of another element. |
:first-letter | Matches the first character within an element. |
:first-line | Matches the first line of text within an element. |
:focus | Matches an element that has the focus. |
:hover | Matches an element below the mouse pointer. |
:link | Matches an unvisited link. |
:visited | Matches a visited link. |