Structural Pseudo-classes

Structural pseudo-classes select elements based on their position in the document.

:first-child and :last-child

Select the first or last child element:

Try:

• li:first-child - first list item
• li:last-child - last list item

:first-of-type and :last-of-type

Select first/last of a specific element type:

• p:first-of-type - first paragraph
• p:last-of-type - last paragraph
• :first-of-type ignores other element types

Styling Lists

:only-child

Selects an element that is the only child:

:empty

Selects elements with no children:

Styling Empty States

:not() Negation

Select elements that don't match a selector:

Practical :not() Usage

Exercise: Style First Item

Style the first list item differently: