In het derde artikel in onze reeks over selectoren bespreken we pseudo-selectoren — die geen echte elementen selecteren, maar delen van elementen, of enkel elementen in een bepaalde context.  Ze komen in twee soorten — pseudo-klassen en pseudo-elementen.

Pseudo-klassen

Een CSS pseudo-klasse is een kernwoord dat voorafgegaan wordt door een dubbel punt (:) dat toegevoegd wordt aan het eind van selectoren om te specifiëren dat je dat element enkel wil selecteren indien het in een bepaalde toestand is.  Zo zou je een bepaalde stijl misschien alleen willen toepassen indien de muis erboven zweeft, of als een keuzevakje aangevinkt is (of net niet), of indien het omhet eerste kind van die ouder in de DOM-boom gaat.

We zullen nu niet alle pseudoklassen uitgebreid bespreken (dat is niet de doelstelling van de tutorial), maar we bespreken sommige van deze selectoren later nog in meer detail waar nodig.

Een voorbeeld van een pseudo-klasse

Laten we voorlopig kijken naar een eenvoudig voorbeeld.  Eerst de HTML:

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

Dan een sprinkeltje CSS:

/* These styles will style our link
   in all states */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

en laten we nu spelen met de link die we net stijlden!

Actief leren: een alternerend gestreepte infolijst

Nu is het jouw beurt — in deze actief leren willen we dat je een infolijst alternerend strepen geeft, en ook dat je de juiste pseudo-klassen stijlt om er voor te zorgen dat de links er anders uit zien wanneer de muis er boven zweeft.  Daarvoor moet je enkel de laatste drie regels in de oefening veranderen.  Een paar hints:

  1. Je hebt eerder al een voorbeeld gezien van hoe je de tweede pseudoklasse moet schrijven voor de "hover"-stijlen.
  2. Voor de zebrastrepen zal je een pseudoklasse zoals :nth-of-type() moeten gebruiken.  Geef de twee kleurregels een licht verschillende versie van de pseudo-klasse om de even (even) en oneven (odd) genummerde items te stijlen.  Kijk of je kan opzoeken hoe je dat moet doen.

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

Pseudo-elementen

Pseudo-elementen trekken heel erg op pseudo-klassen, maar ze hebben enkele verschillen.  Het zijn ook sleutelwoorden, maar dit keer voorafgegaan door twee dubbele punten (::), die kunnen toegevoegd worden aan het einde van een selector om enkel bepaalde delen van dat element te selecteren.

Ze hebben allemaal zeer specifiek gedrag en interessante features, maar ze in detail bespreken is te verregaand op dit moment.

Een voorbeeld van een pseudo-element

Hier tonen we een eenvoudig voorbeeld dat de ruimte selecteert net na alle absolute links en dat een pijltje toevoegt in die ruimte:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

Voegen we deze CSS regel toe:

/* All elements with an attribute "href", which values
   start with "http", will be added an arrow after its
   content (to indicate it's an external link) */
[href^=http]::after {
  content: '⤴';
}

en dan krijgen we dit resultaat:

Actief leren: een chique paragraaf

Voor onze volgende actief leren gaan we een paragraaf chique stijlen!  Het enige wat je moet doen is twee regels toepassen op de eerste regel en de eerste letter van de paragraaf, met behulp van de ::first-line en de ::first-letter pseudo elementen. Dit zou de eerste regel van de paragraaf in het vet moeten zetten en de eerste letter als een leuke initiaal om het een ouderwetse feel te geven.

Indien je een fout maakt kan je altijd herbeginnen met behulp van de Reset knop.  Als je er niet uit komt, kan je op de Show solution knop drukken om een mogelijk antwoord te zien.

Volgende item

We gaan onze tour van de CSS selectoren afronden door te kijken naar Combinatoren en meervoudige selectoren.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,