Pseudo-classes
Pseudo-classes allow you to access elements from stylesheets, using CSS selectors, by using information other than their name, attributes or content. As with pseudo-elements pseudo-classes do not appear in the source code or the document tree.
In the CSS 2.1 specification there are seven pseudo-classes which can be divided into the following four groups:
1. :first-child pseudo-class.
This pseudo-class allows you to apply styles to a specific element when it is the first-child of another element.
Code Example
The following CSS style will be applied to any paragraph elements of the class 'highlight' when they are the first-child of any other element.
p.highlight:first-child{font-size:1.5em; color:sienna;}
The first paragraph (first-child)
The second paragraph
The third paragraph
2. The link pseudo-classes.
- :link - applies to any unvisited link of the specified element.
- :visited - applies to any visited link of the specified element.
3. The dynamic pseudo-classes.
- :hover - applies to the specified element when the cursor is located over the element.
- :active - applies to the specified element when it has been activated (the mouse button has been pushed down).
- :focus - applies to the specified element when it has focus - most
commonly used with
<input>elements in forms.
4. :lang() pseudo-class.
This allows you to style (X)HTML elements depending on the value of the xml:lang or lang attribute.