Score a real menu
Blog stays steelblue: :where(#menu) hides the ID's weight, so (0, 1, 0) loses to (0, 1, 1). About turns orange: :is(#menu) keeps the ID's weight.
Specificity is a three-number score (IDs, classes, types) the browser gives every selector; when origin, importance and layer tie, the higher score wins, compared column by column from the left.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Score each selector: article p, .post .title, #main .post, input[type="checkbox"]:checked + label, ul > li::marker.
The HTML is <div class="card"><h2 class="card-title">Hi</h2></div> and the CSS is .card h2 { color: gray; } followed by .card-title { color: navy; }. Which colour shows? Rewrite the second rule so navy wins, with classes only.
Explain it without notes
What do the three numbers in a specificity score count?
How are two specificity scores compared? Why does (0, 11, 0) lose to (1, 0, 0)?
What is the specificity of :is(#main, .content) p, :where(#main, .content) p and ul li:not(.done)?
Why do many teams avoid ID selectors in their CSS?
Preview
Console
Nothing logged yet.Expected console output
Home: steelblue
Courses: seagreen
Blog: steelblue
About: darkorange