Variants & Interactivity — Chapter Quiz

Question 1

1

What does the group marker enable?

AStyling a child based on an ancestor stateBGrouping utilities to save spaceCA CSS layer named groupDStyling a sibling based on a previous sibling

Mark an ancestor group, then use group-hover: etc. on descendants.

Question 2

2

Why must a peer element come before the element that reacts to it?

AIt is just a conventionBCSS sibling combinators only look backwardCTailwind sorts elements alphabeticallyDIt does not have to

peer-* relies on the subsequent-sibling combinator, which only matches a later sibling reacting to an earlier one.

Question 3

3

What does has-[:checked]: style?

AThe checked input itselfBA parent that contains a checked descendantCThe next sibling of a checked inputDNothing — not a real variant

has-* maps to the CSS :has() relational selector, styling an ancestor based on its contents.

Question 4

4

data-[state=open]: styles an element when it has data-state="open".

TTrueFFalse

Data-attribute variants target elements by attribute value, common with headless UI libraries.

Question 5

5

Which utility animates property changes smoothly?

AtransitionBanimate-onCsmoothDease-in alone

transition enables transitions; pair with duration-* and ease-*.

Question 6

6

To rotate an element 180 degrees, use the rotate-___ utility.

rotate-180 applies a 180-degree transform; transforms are enabled automatically in v4.

Question 7

7

Which utility enables CSS scroll snapping on a container?

Asnap-xBscroll-snapCsnap-onDx-snap

snap-x (or snap-y) sets the snap axis; children use snap-start, snap-center, etc.

Question 8

8

Which are valid state or attribute variants?

Select all that apply.

Afocus-visible:Baria-expanded:Cdisabled:Donhover:

focus-visible:, aria-*:, and disabled: are real variants; onhover: is not — it is hover:.

Test what you learned.