CSS - Pseudo-classes en Pseudo-elementen


Pseudo-classes gaan al langer mee en kunnen gebruikt worden om een bepaald effect toe te passen op een element. Het zorgt er eigenlijk voor dat je content dynamisch kunt opmaken. Pseudo-classes zijn altijd te herkennen aan de dubbele punt gevolgd door een pseudo-class naam en kunnen eventueel te combineren met bestaande classnamen.

Links

Het meest bekende is het opmaken van links. Denk bijvoorbeeld aan :hover dat wordt toegepast op het moment dat een gebruiker met de muis over een link of element beweegt. Een voorbeeld zie je hieronder waarmee is ingesteld dat alle links op een pagina oranje worden zodra je hierop gaat staan met de muis.

<style type="text/css">
a:hover {
color:#FF6600;
}
</style>


Voorbeelden

Hieronder verder geen diepere uitleg maar een aantal voorbeelden hoe je bepaalde elementen op kunt maken met behulp van pseudo-classes. In de voorbeelden pseudo-classes die al beschikbaar zijn sinds CSS 2 maar ook een aantal die pas beschikbaar zijn sinds CSS 3.

Tabellen en opsommingen

Wat nogal eens voorkomt op websites, met name als het gaat om tabellen is dat de rijen om en om zijn opgemaakt, bijvoorbeeld alle oneven rijen. Sinds CSS 3 is het eenvoudig te regelen dat deze opmaak wordt toegepast op bijvoorbeeld alle oneven rijen zonder dat je hiervoor allerlei andere trucjes hoeft uit voeren. Een voorbeeld van een tabel hieronder.

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Hierboven worden alle oneven rijen (odd) voorzien van een achtergrondkleur. Dit is op dezelfde manier te doen met opsommingen. De opmaak van de tabel hieronder. Wil je de even rijen pakken gebruik dan 'even' in plaats van 'odd'. Zodoende voer je een standaard opmaak door voor alle tabellen op je website.

<style type="text/css">
table tr:nth-child(odd) {
background-color:#ccc;
}
</style>


Aanvullend daarop is het eenvoudig om bijvoorbeeld de laatste rij een andere opmaak te geven. In dat geval gebruik je een extra toevoeging aan je opmaak. Wijzig je hier het getal 1 naar 2 dat houdt dat in dat de op één na laatste rij wordt gepakt.

<style type="text/css">
table tr:nth-last-child(1) {
background-color:#ff6600;
}
</style>


Of je kiest ervoor om standaard de opmaak toe te passen om de 2 of 3 rijen:

<style type="text/css">
table tr:nth-child(3n+1) {
background-color:#ccc;
}
</style>


Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Eventueel horizontaal kan het op dezelfde manier:

<style type="text/css">
table.css-table-third td:first-child {
background-color:#ff6600;
}
table.css-table-third td:nth-child(2n+3) { background-color:#ccc;
}
</style>


Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum

Laatste rij last-child en first-child

Handig ook is 'last-child' als je bijvoorbeeld in een opsomming alle rijen een rand geeft aan de onderkant maar dit niet wilt bij de laatste. Je past dan op deze manier opmaak toe op de laatste rij. Een voorbeeld van toepassen op een opsomming hieronder.

<style type="text/css">
ul li:last-child {
border-bottom:none;
}
</style>


  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Met CSS 2 werd al first-child geïntroduceerd en zodoende kun je het eventueel ook omdraaien door in plaats van 'last-child', 'first-child' te gebruiken. Je bepaalt dan dus de stijl van een element dat als eerste binnen een element staat.

Formulieren

Er zijn ook een aantal mogelijkheden met betrekking tot formulieren en het toepassen van opmaak op basis van een bepaalde 'staat'. Zo kun je bijvoorbeeld in de HTML code aangeven dat een bepaald invoerveld uitgeschakeld is. Aansluitend daarop bepaal je dan met CSS op basis van deze 'staat' hoe de opmaak dan moet worden.

Hieronder zie je twee tekstvelden waarvan er een is uitgeschakeld (rechts) en daarom een specifieke opmaak krijgt. Dit is handig in het geval van formulieren.

<style type="text/css">
input:enabled {
border:1px solid #000;
}
input:disabled {
border:1px solid #999;
background-color:#ccc;
}
</style>


Een andere handige truc is het toekennen van opmaak voor alle invoervelden behalve de knop onder een formulier. Je gebruikt in dat geval dan:

<style type="text/css">
input:not([type=submit]) {
background-color:#FF6600;
}
</style>

Taal

Het gaat zelfs zover dat je met CSS bepaalde opmaak toe kunt passen op basis van taal. In dat geval gaat het om de taal die staat vermeld in de tag '<html lang="nl">'. Op basis hiervan regel je dan de opmaak. In het voorbeeld hieronder zie je dat in het geval van een Nederlandse pagina de tekst oranje wordt en in het geval van Engels rood.

<style type="text/css">
p:lang(nl) {
color:#FF6600;
}
p:lang(en) {
color:#FF0000;
}
</style>

Pseudo-elementen

Aanvullend daarop op deze pagina na de Pseudo-classes ook de Pseudo-elementen, net als classes bedoeld om bepaalde effecten toe te passen op sommige selectors en deze kunnen ook met classes gecombineerd worden. Verschil is echter dat pseudo-classes zijn gericht op (onderdelen van) bestaande HTML tags en pseudo-elementen zijn dit niet.

First-letter

Neem bijvoorbeeld 'first-letter' om opmaak toe te kennen aan de eerste letter van een tekst. Een voorbeeld hieronder waarbij de eerste letter vetgedrukt wordt en groter is.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat erat, dignissim vitae pharetra sed, scelerisque vitae nulla. Nullam varius, augue et faucibus egestas, turpis leo placerat enim, id congue eros tellus sed nulla. Mauris purus quam, blandit eget porta.

<style type="text/css">
p:first-letter {
font-size:30px;
font-weight:bold;
}
</style>


First-line

Naast 'first-letter' bestaat er ook first-line met hetzelfde doel maar dan gericht niet gericht op de eerste letter maar op de zin van een tekst. Een voorbeeld hieronder .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat erat, dignissim vitae pharetra sed, scelerisque vitae nulla. Nullam varius, augue et faucibus egestas, turpis leo placerat enim, id congue eros tellus sed nulla. Mauris purus quam, blandit eget porta.

<style type="text/css">
p:first-line {
font-size:30px;
font-weight:bold;
}
</style>


Before en After

Met Before en After heb je de mogelijkheid om bepaalde inhoud toe te voegen voor of achter een element. Zo zet je bijvoorbeeld een bepaalde tekst voor een link of voeg je een afbeelding toe voor een link of voor een ander element. Hieronder zie je een voorbeeld waarbij er automatisch een tekst voor het element wordt geplaatst. Vervang eventueel in de code 'before' voor 'after' om je inhoud toe te voegen na het element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat erat, dignissim vitae pharetra sed, scelerisque vitae nulla. Nullam varius, augue et faucibus egestas, turpis leo placerat enim, id congue eros tellus sed nulla.

<style type="text/css">
p:before {
content: open-quote 'Tekst inclusief quotes:' close-quote;
}
</style>


Met een afbeelding wordt het dan als volgt:

<style type="text/css">
p:before {
content: url(afbeelding.gif);
}
</style>