Selectors, vervolg

Vorige week zag je er vier: element, class, id en attribute. Daarmee kan je een element selecteren op basis van wat het is of welke attributen het heeft.

Deze week: de rest 🙂
Selecteer een element op basis van waar het staat en in welke toestand het is.

Extra selectors

Pseudo-classes

Een pseudo-class selecteert een element in een bepaalde toestand of op een bepaalde plaats.

Syntax

Je herkent ze aan de dubbelpunt.

a:hover {
    color: oklch(0.5 0.2 25);
}

De toestanden of states die je het meest gebruikt:

Pseudo-class	Wanneer
:hover	de muis staat boven het element
:focus-visible	het element heeft focus via het toetsenbord
:visited	een link die je al bezocht hebt
:active	op het moment dat je klikt

:hover en :focus-visible horen samen

Wie met het toetsenbord navigeert, hovert nooit. Schrijf je alleen :hover, dan heeft die gebruiker geen of onvoldoende aanwijzing waar hij is.

a:hover,
a:focus-visible {
    color: oklch(0.5 0.2 25);
}

En de plaatsen:

Pseudo-class	Welk element
:first-child	het eerste kind van zijn parent
:last-child	het laatste kind van zijn parent
:nth-child(3)	het derde kind
:nth-child(odd) of (even)	de oneven of even kinderen
a:first-of-type	het eerste type-kind van van zijn parent, in dit geval een de eerste a
a:last-of-type	het laatste type-kind van zijn parent
a:nth-of-type(3)	het derde type-kind
:not(...)	alles behalve wat tussen de haakjes staat

li:first-child {
    background-color: oklch(0.95 0.05 90);
}

Er zijn er veel meer dan deze. De volledige lijst staat in de MDN pseudo-class reference.

Oefening

Pseudo-elements

Een pseudo-element selecteert een deel van een element, of voegt er een stuk aan toe.

Syntax

Je herkent ze aan de dubbele dubbelpunt.

p::first-letter {
    color: oklch(0.5 0.2 25);
}

Bijvoorbeeld:

• ::first-letter en ::first-line: het eerste stuk van een tekst
• ::before en ::after: een stukje inhoud dat je met CSS toevoegt, vóór of na de inhoud van het element. Die twee hebben altijd een content nodig, al is het een lege string.

.extern::after {
    content: " (externe link)";
}

Geen inhoud in je CSS

::before en ::after zijn handig voor decoratie, zoals een pijltje of een streepje. Zet er geen echte informatie in: wat in je CSS staat, staat niet in je HTML, en dus niet in je DOM.

De volledige lijst staat in de MDN pseudo-element reference.

Oefening

Geef alle external links (links naar een andere website) de emoji 🌐 als ::after content.

💡

External links zijn links waarvan het href attribuut start met "https".
Je hebt dat vorige week gezien!

Universal selector

De * selecteert alles.

*, *::before, *::after {
    box-sizing: border-box;
}

Dat is meteen de belangrijkste toepassing, en één van de weinige plaatsen waar je hem kan/mag gebruiken. Zie verderop bij het box model.

Opgelet

Probeer die selector verder te vermijden.
Is het echt nodig om elk element dezelfde stijl te geven? Is dat al niet gedekt door de inheritance regels van CSS?

Zeker niet voor CPU intensieve stijlen: * { transition: ... } of * { box-shadow: ... } dwingt de browser om elk element op je pagina opnieuw te berekenen. Dat voel je als gebruiker.

Combineren en groeperen

Combined selectors

Je mag selectors aan elkaar plakken. Dan moet een element aan alle voorwaarden voldoen.

p.plain.box:not(#bio):first-child {
    color: black;
}

Lees dat als: elke paragraaf die zowel class plain als class box heeft, geen id bio heeft, en het eerste kind van zijn parent is.

Dat kán. Doe het met mate: hoe langer je selector, hoe moeilijker je hem later nog overschrijft.

Grouped selectors

Meerdere selectors die dezelfde regels krijgen, scheid je met een komma.
Zo vermijd je dat je dezelfde regels drie keer typt.

p.plain, a, footer {
    color: black;
}

💡 Je hebt dit al gezien bij

a:hover,
a:focus-visible {
  ...
}

De link krijgt dezelfde stijl bij hover als bij toetsenbordfocus.

Combinators

Een combinator selecteert op plaats in het document.

Dit is het moelijkste en nuttigste onderdeel.

Combinator	Teken	Betekenis
descendant	spatie	ergens in - een afstammeling
direct child	>	rechtstreeks in - een kind, maar geen kleinkind
general sibling	~	ergens erna, op hetzelfde niveau - een broertje
adjacent sibling	+	er direct op volgend, op hetzelfde niveau - het eerstvolgende broertje

main p   { /* elke p ergens in main */ }
main > p { /* elke p die rechtstreeks in main zit */ }
h2 ~ p   { /* elke p die na een h2 komt, binnen dezelfde parent */ }
h2 + p   { /* de p die direct op een h2 volgt */ }

Siblings kijken alleen vooruit

HTML loopt van boven naar onder. ~ en + selecteren enkel elementen die na het genoemde element komen, nooit ervoor.

Klinkt triviaal, maar is een klassieke pain in the... van CSS.

Voorbeeld

<section>
    <h1>Hi, my name is</h1>
    <p id="intro">I'm Bart en ...</p>
    <figure>
        <img src="..." alt="">
    </figure>
    <p>...</p>
    <p>...</p>
</section>

Welke relaties kloppen hier

• section img: de img zit ergens in de section, dus ja.
• figure > img: de img is een rechtstreeks kind van de figure, dus ja.
• section > figure: ja, de figure zit rechtstreeks in de section.
• h1 ~ figure: ja, de figure komt na de h1 binnen dezelfde parent.
• h1 + p#intro: ja, die paragraaf volgt direct op de h1.
• figure + p#intro: nee. Er staat wel een p direct na de figure, maar dat is niet degene met id intro. Die staat ervoor.

Recap

Wat je selecteert	Hoe
op tag name	element
op class	.class
op id	#id
op attribuut	[attribute]
op toestand of plaats	:pseudo-class
een deel van een element	::pseudo-element
alles	*
meerdere voorwaarden tegelijk	aan elkaar plakken
meerdere selectors samen	komma
op plaats in het document	spatie, >, ~, +

Oefening: zes selectors

De opdracht staat in styles.css. Je mag de HTML niet aanpassen, dus je zal met plaats en toestand moeten werken.

Openen in een nieuw tabblad

🙈 Antwoord

nav a {
    color: oklch(0.4 0.1 250);
}

h2 + p {
    font-style: italic;
}

.labos li:first-child {
    background-color: oklch(0.95 0.05 90);
}

footer p:last-child {
    margin-bottom: 0;
}

main p::first-letter {
    color: oklch(0.5 0.2 25);
}

h2, a {
    letter-spacing: 0.02em;
}

Opdracht 1 en 3 kon je ook met een class oplossen... maar je mocht niet.
Het is precies de situatie waarin je zit wanneer je CSS schrijft voor HTML die je niet zelf beheert.