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