Pseudo-classes are introduced in the CSS to better classify elements on characteristics that cannot be retrieved from the document tree.

Pseudo-classes may be rendered dynamic if an element gets generated or dropped with the user interaction with the document (let say via a JavaScript).

Following pseudo-classes are on the disposal:

:first-child pseudo-class

Refers to the first child of selected element.

Link pseudo-classes :link and :visited

The :link pseudo-class applies to those links that haven't been yet visited while the visited pseudo-class applies to those that have been visited already by the user.

Dynamic pseudo-classes :hover, :active and :focus

The :hover pseudo-class activates when the user hovers above an element but does not click on it. Beside obvious use with <a> elements it may be used in combination with other elements; most of the browsers these days will understand that command. The :active pseudo-class applies when the user is activating an element but before the element gets actually triggered, let say during a mouse button being pressed but before it gets released. The :focus pseudo-class gets applied when an element receives the focus; mostly used with input fields and form elements.

The best way to go with these types of pseudo-classes is to test them during the design because different browsers might have different rendering of the same selectors.

Language pseudo-class :lang

The :lang pseudo-class may be used to apply different style to elements based on their language selection.

Example

CSS pseudo-classes example:

 

›› go to examples ››