Challenge - Advanced selectors
Build a complex list interface with advanced selectors.
Complex list with advanced selectors
Advanced selectors style nested lists with single lines of CSS. The child combinator > picks only direct children; the adjacent sibling + picks the one right after; the general sibling ~ picks all that follow.
:nth-child(odd) picks odd rows, :has(> .active) picks parents that contain an active child. With four selectors, menus, tabs and tables come together in a single block.
Exercise Complete the complex list interface
Complete the CSS below. Add padding-left: 1rem to the .menu > li child selector. Add border-top: 1px solid #e5e7eb to the .menu li + li sibling selector. Add background: #f0fdf4 to .menu:has(.active).
Show example solution
/* direct children */
.menu > li {
padding-left: 1rem;
}
/* adjacent siblings */
.menu li + li {
border-top: 1px solid #e5e7eb;
}
/* active child present */
.menu:has(.active) {
background: #f0fdf4;
}Test yourself
-
Write the right side of the child combinator
.menu > ____ { padding-left: 1rem; }Show answer
.menu > li { padding-left: 1rem; } -
What does :has(.active) match?
.menu:has(.active) { background: #f0fdf4; }- Only the .active class
- Elements that are not .active
- An element that contains .active
- The first .active element
Show answer
An element that contains .active — Correct. :has() selects a parent that contains a matching element; it looks inward.
-
Match each selector to its role
- >
- Picks a direct child
- +
- Picks the next sibling
- ~
- Picks all following siblings
- :nth-child(odd)
- Picks odd rows