Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Pseudo-classes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
selector:pseudo-___-name {3Order
Put the learning moves in the order that makes the concept easiest to apply.
Structural Pseudo-classes
Interactive Pseudo-classes
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