Specificity berekenen

Vorige week leerde je de rangorde: id verslaat class verslaat element. Dat volstond zolang je selectors uit één stuk bestonden.

Nu je selectors kan combineren, volstaat dat niet meer.
Wint main p.intro van #content p? Daarvoor moet je tellen.

De som

Zet drie cijfers naast elkaar en tel per selector hoeveel er van elke soort in zit.

Kolom	Wat je telt
#id	id-selectors: #intro
.class, [attribute], :pseudo-class	class-selectors, attribute selectors en pseudo-classes: .box, [href], :hover
element, ::pseudo-element	element-selectors en pseudo-elements: p, ::before

De linkse kolom weegt altijd zwaarder dan de rechtse, hoeveel er rechts ook staat. Tien classes verslaan nog altijd geen enkele id.

Selector	id	class	element
p	0	0	1
p.intro	0	1	1
main p.intro	0	1	2
#content p	1	0	1
a:hover	0	1	1
p.plain.box:not(#bio):first-child	1	3	1
main#main section:first-of-type p::after	1	1	3

Dus #content p (1-0-1) wint van main p.intro (0-1-2), want de id-kolom beslist eerst.

Twee dingen tellen niet mee

De universal selector * telt voor niets. En :not() zelf telt niet mee, wel wat er binnenin staat. Daarom staat #bio in het voorbeeld hierboven in de id-kolom.

💡 devtools

In de devtools zie je meteen welke regel wint en welke doorstreept is.

Oefening

Welke kleur krijgt de paragraaf?

<main id="main">
    <h1>Hi, my name is</h1>
    <p id="intro" class="black">I'm Bart en ...</p>
</main>

p.black        { color: green; }
main > p       { color: red; }
p#intro        { color: blue; }
p              { color: black; }

Antwoord

Blauw.

Selector	id	class	element
p.black	0	1	1
main > p	0	0	2
p#intro	1	0	1
p	0	0	1

p#intro is de enige met een id, dus die wint, ongeacht waar hij staat.

De combinator > telt zelf niet mee. Hij zegt alleen iets over de relatie, niet over hoeveel elementen je selecteert.

En hier?

p.black  { color: green; }
p#intro  { color: blue; }
p        { color: black; }
p#intro  { color: red; }

Antwoord

Rood. Beide p#intro zijn even sterk (1-0-1), en bij gelijkspel wint de laatste. Dat is de cascade van vorige week.

Thuis

Bereken de specificity van deze drie:

main#main section:first-of-type p::after
main#main + footer > a[href^="tel:"]
img ~ p.caption span.author

Antwoord

Selector	id	class	element
main#main section:first-of-type p::after	1	1	3
main#main + footer > a[href^="tel:"]	1	1	3
img ~ p.caption span.author	0	2	3

De eerste twee zijn precies even sterk. Botsen ze, dan beslist de volgorde in je bestand.

Op een test?

GEGARANDEED. Ik vraag elk jaar een reeks moeilijke selectoren om te berekenen.

Nooit

Inline styles en !important

Een inline style in je html (style="font-weight: bold;") verslaat je hele external stylesheet. Een !important verslaat zelfs dat.

Allebei zijn ze een manier om de cascade te omzeilen in plaats van te begrijpen.

De volgende keer dat jij of iemand anders iets wil aanpassen zit er maar één iets op en dat is nóg een !important toevoegen.
Zo eindig je met stylesheet spaghetti.

Kom je in de verleiding, dan is bijna altijd je selector het probleem. Een regel die je niet overschreven krijgt, is meestal een regel die te sterk is. Of omgekeerd, maak je nieuwe regel sterker.

Werk met de cascade, niet tegen de cascade.