CSS Pseudo-classes
Share
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
}
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
