CSS Selectors and Specificity

All in one: every selector and every "who wins?" rule, side by side

What this example compares

Five ways of pointing: element p vs class .card vs id #login vs universal * vs grouping h4, h5, h6
Symbol slips: class="ok" + .ok vs a dot in the HTML, no dot in the CSS, a dot for an id, header vs #header, one bad name in a comma list
Where it sits: article p (space) vs article > p vs h2 + p vs h2 ~ p, and the chain nav ul li a
The space that changes everything: .card .wide vs .card.wide
Who wins: !important vs more specific vs written later
Specificity scored: p 0,0,1 vs section p 0,0,2 vs .note 0,1,0 vs #special 1,0,0
What counts in each column: id vs class, [type="text"], :hover vs tag, ::before vs *, space and > (nothing); #box p vs .card .inner .text p; nav a:hover vs #menu a
Inheritance: color, font-family, font-size, line-height, text-align pass down; border, padding, margin, width, background do not; a direct rule beats an inherited value
The !important trap: one shout vs a second shout vs adding one class
When a rule "is not working": not listed vs crossed out by a higher score vs crossed out by a later rule vs a missing }, and the DevTools Styles panel (F12)
Choosing in practice: a long chain vs one class, and the profile card with .course and .featured

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see eleven panels. Panel 1 shows two blue paragraphs, two cream cards, a green "Log in" button, a dashed box round every element inside one card, and three headings in amber Georgia. In panel 2 only the two RIGHT cards and the <header> line are green; the WRONG cards and both lines of the last card stay plain. In panel 3 the direct child is red on cream, the grandchild red only, the line outside blue; Line 1 of the next card has a green box and all three lines are purple; only the two links inside the nav are green. In panel 4 card A's line is red, card B is a green box and card C stays plain. Panel 5 shows red, green and a green button. Panel 6 counts blue, teal, orange, crimson. In panel 7 the first line is crimson, the text box has a green border and the number box a red one, "NEW" appears in red, "Bold" is green, card E's line is green and both links are green until you point at the second one. Panel 8 shows purple centred Georgia text, a purple box whose inner line has no border, and a purple line above a blue one. Panel 9 shows a red price, a green price, then a red and a green price. In panel 10 the first three lines stay plain or red, Line 1 of card D is green and Line 2 is not, and card E lists four rules with three crossed out. Panel 11 shows "CSE326" in amber twice and the featured course with an orange border. There is no JavaScript, so the Console stays empty.

Quick check: in panel 7, card A, #intro is written before .intro. Why is the line still crimson?

Because test 2 (specificity) comes before test 3 (order). #intro scores 1,0,0 and .intro scores 0,1,0; compared left to right, the id wins at the first column. Source order only decides when the two scores are exactly equal.