Question 1

What is the difference between .a .b and .a.b?

Accepted Answer

Descendant combinator vs AND on the same element. .a .b matches .b inside .a. .a.b matches an element with both classes.

Question 2

Explain child, sibling, and adjacent sibling combinators.

Accepted Answer

> child, ~ general sibling, + adjacent sibling. They don't select ancestors. Whitespace descendant is more expensive/broad than >.

Question 3

When do you use :is() vs :where()?

Accepted Answer

Both list selectors; :is() keeps specificity of its most specific arg; :where() is always zero. :where() is great for resets. :is() for grouping without repetition.

Question 4

What does :has() enable?

Accepted Answer

Parent/ancestor selection based on descendants — previously impossible in CSS. Powerful but can be style-invalidating costly. Use thoughtfully for UI states.

Question 5

Attribute selectors — equals vs contains vs prefix?

Accepted Answer

[attr=val], *= contains, ^= prefix, $= suffix, ~= word, |= hyphen code. Useful for language, data attributes, partial href matches. Prefer exact when possible.

Question 6

Pseudo-classes vs pseudo-elements?

Accepted Answer

Pseudo-classes select states (:hover, :focus-visible); pseudo-elements style fragments (::before, ::marker). Single vs double colon historically mixed; use :: for modern pseudo-elements.

Question 7

Why prefer :focus-visible over :focus for outlines?

Accepted Answer

Shows focus ring mainly for keyboard users, reducing mouse-focus noise. Don't remove outlines without :focus-visible replacement. Accessibility requirement.

Question 8

How do specificity traps happen with IDs in selectors?

Accepted Answer

IDs outweigh many classes, making overrides painful. Avoid IDs in CSS hooks; use classes/data attributes. Prefer layers over escalating specificity.

Question 9

What are structural pseudo-classes like nth-child useful for?

Accepted Answer

Selecting by position without extra classes — zebra rows, first/last, formulas. nth-child counts all children; nth-of-type filters by type. Off-by-one common.

Question 10

Selector performance myths — what matters today?

Accepted Answer

Extremely deep selectors rarely dominate; invalidations and layout do. Still keep selectors intentional. Avoid universal+expensive patterns in hot paths. Measure before micro-optimizing selectors.

Question 11

How do you style a form control only when invalid after interaction?

Accepted Answer

:user-invalid / :user-valid (and older patterns with classes) avoid showing errors too early. Pair with a11y messaging. Don't rely on color alone.

Question 12

Explain :not() limitations and nesting.

Accepted Answer

:not() can take complex selectors in modern CSS; specificity depends on arguments. Overuse reduces readability. Combine with :is for grouping.

Question 13

Establish selector conventions for a large codebase.

Accepted Answer

Forbid IDs, prefer data-testid only for tests, document :has usage, lint complexity, BEM or utilities. Consistency beats cleverness. Codemod migrations when conventions change.

Selectors CSS Interview Questions

Other CSS interview topics