Structural pseudo-classes
Part of the CSS Mastery section of Coddy's HTML journey — lesson 12 of 43.
Structural pseudo-classes in CSS are used to style elements based on their position or structure within the HTML document. They allow you to select elements like the first child, last child, or specific numbered children without needing extra classes or IDs.
Common examples include:
:first-child— selects the first child of a parent.
:last-child— selects the last child of a parent.:nth-child(n)— selects the nth child (e.g., every 2nd, 3rd, etc.).
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
Cheat sheet
Structural pseudo-classes style elements based on their position within the HTML document:
:first-child— selects the first child of a parent:last-child— selects the last child of a parent:nth-child(n)— selects the nth child (e.g., every 2nd, 3rd, etc.)
Try it yourself
This lesson doesn't include a code challenge.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in CSS Mastery
1Selector Mastery – Combination
IntroductionDescendant SelectorChild SelectorAdjacent Sibling SelectorGeneral Sibling SelectorRecap Challenge3Structural pseudo-classes
Structural pseudo-classesTargeting the First ChildTargeting the Last ChildPattern Power: Using nth-childRecap Challenge