CSS Selectors Test

Test your ability to target elements with combinators, attributes and functional pseudo-classes.

6 questions. Choose the best answer for each question, then review every explanation.

Question 1 of 6

1 of 6

Question 1What does the child combinator select?

.menu > li

The first li after .menuA .menu element inside an lili elements that are direct children of .menuEvery li anywhere inside .menu

Question 2What does the adjacent sibling combinator select?

h2 + p

The first p immediately following an h2Every p after an h2Every p inside an h2The h2 immediately following a p

Question 3Which selector matches required input elements?

input > required#required inputinput[required]input.required()

Question 4Which selector targets every odd list item?

li:nth-child(odd)li:first-child(odd)li:oddli:nth(odd)

Question 5Why is :focus-visible often preferable to :focus for custom focus rings?

It selects every visible elementIt follows browser heuristics for when a visible focus indicator is neededIt works only with a mouseIt disables keyboard focus

Question 6What does this selector exclude?

button:not([disabled])

Buttons without textButtons inside formsButtons with a classButtons with a disabled attribute