Keep specificity low with :where()

Write an easy-to-override base style for navigation links.

Official sourceW3C Selectors — :where() specificityReviewed: 2026-08-26

STEP 1 · LEARN

How it works

The :where() functional pseudo-class accepts a selector list, but neither :where() nor its arguments contribute specificity. It is useful for defaults intentionally kept easy to override.

Correct example

:where(.site-nav a) { color: #0f172a; }

Links receive the base colour without a hard-to-override selector.

Common mistake

#header .site-nav ul li a { color: #0f172a !important; }

The ID, long chain and !important unnecessarily make overrides harder.

STEP 2 · APPLY

Your exercise

Use :where(.site-nav a) and set colour to #0f172a.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The :where() rule uses the required colour.
The target element is present in the page.

Explain the solution logic

:where() keeps selector matching while contributing zero specificity.

How it works

Your exercise

Write and see the result

What needs to pass