HTML & CSS voor beginners (Deel 28): Zo werkt de toegang met de selectoren (3)

In deze laatste Selectoren tutorial presenteer ik jullie een heel bijzondere vorm van selectoren. Het gaat hierbij om zogenaamde pseudoklassen en pseudo-elementen. Dit zijn selectoren die niet verwijzen naar specifieke HTML-elementen, maar door het uitvoerapparaat worden gegenereerd.

Met pseudoklassen en pseudo-elementen kunnen declaraties worden gedefinieerd voor HTML-componenten die niet eenduidig kunnen worden beschreven door een HTML-element. Typische voorbeelden zijn een net aangeklikte of nog niet bezochte hyperlink.

Hyperlinks vormgeven

Vaak wil men de hyperlinks op de pagina vormgeven. Hiervoor biedt CSS talrijke mogelijkheden waarmee de verschillende staten van hyperlinks kunnen worden aangesproken en uiteindelijk ook optisch kunnen worden aangepast.

Als je bijvoorbeeld een hyperlink een rode kleur wilt toewijzen, ziet dat er als volgt uit:

a:link {
   color: red; 
}

Met a:visited worden daarentegen al bezochte hyperlinks aangeduid. Met de volgende syntax kunnen dergelijke hyperlinks die al eerder zijn aangeklikt, in blauwe kleur worden weergegeven.

a:visited { 
  color: blue;  
  text-decoration: none; 
}

In de browser ziet dat er zo uit:

Als je hyperlinks apart wilt vormgeven die op dat moment worden aangeklikt, is dat ook mogelijk.

a:active { 
   font-weight: bold; 
   color: blue; 
   text-decoration: none; 
}

Hiervoor wordt de syntax a:active gebruikt.





De syntax a:hover verwijst daarentegen naar de staat waarin met de muisaanwijzer over de hyperlink wordt bewogen. Daarnaast is er met a:focus een ander pseudo-element. Dit beschrijft het moment waarop de hyperlink de focus krijgt.

Andere pseudo-elementen

Er zijn pseudo-elementen waarmee delen van andere elementen kunnen worden aangesproken. Een typisch voorbeeld hiervan is ::first-letter. Dit pseudo-element selecteert het eerste teken van het huidige element. Het kan worden ingezet voor alle elementen die tekst bevatten. Let op: Pseudo-elementen moeten alleen aan het einde van alle selectoren worden vermeld. Ze moeten dus voor de openende accolade staan.

h1::first-letter { 
   color: blue; 
}

Met ::first-line kan de eerste regel van een element worden aangesproken. Dit pseudo-element is uitsluitend van toepassing op blok-niveau-elementen. Een voorbeeld:

p::first-line { 
   background-blue; 
}

En hier het resultaat in de browser:

een

Met de beide pseudo-elementen :after en :before kunnen extra inhoud vóór en na een element worden weergegeven. Met content wordt bepaald wat moet worden uitgevoerd.

• normaal - het doorgaans gedefinieerde pseudo-element wordt niet gegenereerd.

• geen - het pseudo-element wordt niet gegenereerd.

• <string> - de hier opgegeven tekenreeks wordt uitgevoerd. Tekenreeksen moeten tussen enkele of dubbele aanhalingstekens worden geplaatst.

• <uri> - de bron die onder de URI is opgegeven, wordt ingevoegd.

• <counter> - definieert een teller of spreekt een specifieke teller aan.

• attr(<identifier>) - de waarde van het in haakjes opgegeven attribuut wordt ingevoegd.

• close-quote - voegt een sluitend aanhalingsteken in.

• no-close-quote - er wordt geen sluitend aanhalingsteken ingevoegd, maar de nestingdiepte neemt wel toe met één.

• no-open-quote - er wordt geen openingsaanhalingsteken ingevoegd, maar de nestingdiepte neemt wel toe met één.

• open-quote - voegt een openingsaanhalingsteken in.

Een voorbeeld:

ul li:before { 
   content: uri("bullet.gif"); 
}

Met CSS3 is ook de pseudoselector :not geïntroduceerd. Hiermee kunnen heel eenvoudig specifieke inhouden worden geselecteerd. Een eerste voorbeeld laat zien hoe krachtig deze pseudoselector daadwerkelijk is. Stel, je wilt alle hyperlinks selecteren die geen href-attribuut hebben. De bijbehorende syntax zou er als volgt uitzien:

a:not([href])

"Normale" hyperlinks zouden niet worden beïnvloed door deze syntax. Toegang tot ankerdefinities zou echter mogelijk zijn.

<a name="top">Paginabegin</a>

Een wat uitgebreider voorbeeld moet de kracht van :not verduidelijken. Er zijn verschillende alinea's gedefinieerd binnen een document.

<body>
<h1>PSD-Tutorials.de</h1>
<p>Dit is een alinea.</p>
<p>Dit is nog een andere alinea.</p>
<div>Dit is een tekstgebied.</div>
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
</body>

Naast alinea's die zijn gemarkeerd met een p, is er ook een div-gebied en een hyperlink. Nu moet het volgende gebeuren:

• Alle alinea's gemarkeerd met een p krijgen een zwarte tekstkleur.

• Overal waar geen p-afdelingen zijn, wordt daarentegen rood als tekstkleur gebruikt.

De bijbehorende CSS-syntax ziet er als volgt uit:

p {
    color:#000;
 }
 :not(p) {
    color:#ff0000;
 }

Het principe van overerving

Een van de belangrijkste dingen als het gaat om het begrijpen van CSS-definities, is overerving. In feite worden in CSS de stijleigenschappen van het ene op het andere element overgeërfd.

Een voorbeeld:

html {
    color: red
 }

Door deze definitie wordt de voorgrondkleur Rood toegewezen aan het html-element.

Vanwege het overervingsprincipe geldt deze kleurdefinitie nu in eerste instantie ook voor alle elementen die onder html vallen. Nu worden dus standaard eerst alle elementen in Rood weergegeven die onder html vallen. Voordeel van deze variant: Voor deze elementen hoef je Rood niet expliciet als kleur te bepalen. Maar wat als de inhoud van p-afdelingen niet in Rood moet worden weergegeven? Dan moet de overkoepelende kleurdefinitie van html worden overschreven.

html {
   color: red;
}
p {
   color: #000;
}

Wat gebeurt er als er nu twee elementen p en div zijn?

<body>
<p>PSD-Tutorials.de</p>
<div>Welt</div>
</body>

Het resultaat ziet er als volgt uit:

De kleurdefinitie van html heeft alleen invloed op de inhoud van div. De p-afdeling daarentegen wordt weergegeven in zwart lettertype.

In CSS zijn er verschillende manieren om stijldefinities vast te leggen. Dit is dan ook de reden waarom er tegenstrijdige instructies kunnen zijn voor een element. Voor dergelijke gevallen voorziet CSS in een prioriteitssysteem. Aan de hand van dit principe is vastgelegd welke instructies prioriteit hebben voor een element. Ik wil op dit punt niet te diep ingaan op de details van dit principe. Uitgebreide informatie daarover vind je bijvoorbeeld op de site http://wiki.selfhtml.org/wiki/CSS/Kaskade of ook op http://www.thestyleworks.de/basics/cascade.shtml.

Waar het mij om gaat, is om te laten zien waar je op moet letten bij het definiëren van CSS-eigenschappen. Dit wordt geïllustreerd door het volgende voorbeeld:

<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 90%;
}
p {
   color: #000;
}
h1 {
   font-size: 120%;
   font-weight: normal;
}
strong {
   color:#CCCCCC;
}
h2 strong {
   color: red;
}
</style>
</head>
<body>
<div>
  <h1>PSD-Tutorials.de</h1>
  <p>Dit is een alinea met een <strong>vetgedrukt woord</strong>.</p>
  <h2>Dit is een kop met een <strong>vetgedrukt woord</strong>.</h2>
</div>
</body>
</html>

In de browser ziet dat er als volgt uit:





Zoals je ziet, worden bijvoorbeeld de woorden gemarkeerd met strong anders opgemaakt. Welke opmaak wordt toegepast, is uiteindelijk afhankelijk van de volgorde van de definities.

Alternatief hiervoor is er het sleutelwoord !important waarmee je een CSS-instructie kunt markeren als bijzonder belangrijk.

<style>
body {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 90%;
}
p {
   color: #000;
}
h1 {
   font-size: 120%;
   font-weight: normal;
}
strong {
   color:#CCCCCC !important;
}
h2 strong {
   color: red;
}
</style>

Ook hier nogmaals een kijkje naar het resultaat:





Lees in dit verband zeker ook nog de in dit tutorial genoemde bronnen door. (Ook al hoef je voor het begin zeker nog niet zo diep op dit onderwerp in te gaan).