CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Some common use for pseudo-classes:
- Style an element when a user moves the mouse over it
- Style visited and unvisited links differently
- Style an element when it gets focus
- Style valid/invalid/required/optional form elements
- Style an element that is the first child of its parent
Syntax
Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name:
selector:pseudo-class-name {
CSS properties
}
Mouse Over Me
Interactive Pseudo-classes
Interactive pseudo-classes apply styles based on user interaction:
:hover- When mouse is over an element:focus- When an element has focus:active- When an element is being activated:link- Unvisited links:visited- Visited links
Structural Pseudo-classes
Structural pseudo-classes select elements based on their position in the document tree:
:first-child- First child of a parent:last-child- Last child of a parent:nth-child(n)- The nth child of a parent:lang()- Elements with a specific language
CSS Pseudo-classes Reference
Note: For a complete list of all CSS Pseudo-classes, visit our CSS Pseudo-classes Reference.
