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

Next lesson: Challenge - Modern layout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies