A Pseudo-class, or pseudo-selector, is used to select an element in a specific state.
Dynamic Pseudo-Classes
Commonly used with menus and hyperlinks, these include :link, :visited, :hover, :active, and :focus.
For details on these, please refer to the menu discussion from INFS 315.
UI Element State Pseudo-Classes
The element state pseudo classes are typically used with forms. The element state pseudo-classes include :enabled, :disabled, and :checked.
Structural Pseudo-Classes
These pseudo-classes are used to select elements based upon position within the DOM or document object model.
- :first-child: selects the first item in the collection
- :nth-child(n): selects an item based on formula or key (such as odd or even)
- :nth-last-child(n)
- :nth-of-type(n)
- :nth-last-of-type(n)
- :last-child: selects the last item in the collection
- :first-of-type
- :last-of-type
- :only-child
- :only-of-type
- :root
- :empty: selects empty items (such as an image containing alt="").
Example
The :last-of-type structural pseudo-class can be used to select the final element of an unordered list used as a menu.
.menu li:last-of-type {text-align: right;}
Other Pseudo-Classes
- :not(x)
- :target
- :lang(language)
The :target pseudo-class is incredibly helpful in designing menus; the :lang pseudo-class should be familiar from creating HTML templates.
