Selectors

Een selector zegt welke elementen een rule krijgen.

Element selector

Selecteert elementen op hun tag name.
Geen punt, geen hekje, gewoon de naam van het element.

p {
    color: darkred;
}

Voor alle (⚠)️ paragrafen op je site: tekstkleur donkerrood.

Class selector

Selecteert elementen op hun class, voorafgegaan door een punt.

.plain {
    color: red;
}

<p class="plain">Deze wel.</p>
<p>Deze niet.</p>
<article class="plain">Deze ook.</article>

💡 Herinner les 2

Meerdere elementen mogen dezelfde class hebben, en één element mag meerdere classes hebben. Gebruik dezelfde class op alle elementen die dezelfde stijlkenmerken moeten hebben.

Id selector

Selecteert het ene element met dat id, voorafgegaan door een hekje/spoorwegtegen/hashtag/...

#content {
    color: green;
}

Een id komt maar één keer voor op een pagina, dus slechts één element krijgt die stijlregel.

Gebruik zo weinig mogelijk

Of nog beter. Niet.

Een id-selector weegt heel zwaar door in de cascade. Wat je met een id stylet, krijg je later moeilijk nog overschreven.

Attribute selector

Selecteert elementen op een attribuut, tussen vierkante haakjes.

[href="https://odisee.be"] {
    color: red;
}

Alles met exact die href wordt rood. Je kan ook op het bestaan van een attribuut selecteren, of op een stuk van de waarde:

[disabled]           { /* elk element met een disabled-attribuut */ }
[href^="tel:"]       { /* elke href die begint met tel: */ }
[href$=".pdf"]       { /* elke href die eindigt op .pdf */ }

Dit zijn eerder randgevallen dan dagelijks werk, maar je gaat ze tegenkomen en dan moet je ze kunnen lezen.

Probeer ze allemaal uit!

Zo is een link naar <a href="https://odisee.be">Odisee</a> 
anders dan een link naar <a href="./">een link met een relatief pad als href</a> 
en nog anders dan een <a href="tel:0477889911">telefoonnummer</a>.

Recap en oefening

Wat je selecteert	Hoe
op tag name	element
op class	.class
op id	#id
op attribuut	[attribute]

Schrijf in de playground hieronder vier selectors. De opdracht staat in styles.css.

Openen in een nieuw tabblad

Volgende week in Selectors, vervolg

• pseudo-classes zoals :hover, :focus-visible, :first-child
• pseudo-elements zoals ::before en ::after
• de universal selector *
• combined selectors zoals p.plain#intro
• combinators om op plaats te selecteren: main p, main > p, h2 + p