Pseudo class selectors
Het coolste aan CSS is dat het je de mogelijkheid geeft om effecten toe te voegen aan de ankertags (link, visited, active, hover) ook wel links genoemd. In HTML is de enige manier om dit effect toe te voegen door gebruik te maken van JavaScript, maar met de toevoeging van CSS kunnen JavaScript-links worden vergeten.Een pseudo-class selector heeft als basis een dubbele punt gevolgd door de naam. Stijlregels waarin gebruik gemaakt wordt van een pseudo-class selector kunnen er als volgt uitzien:
:pseudo-classnaam { stijldeclaratie }
Element:pseudo-classnaam { stijldeclaratie }
| Om de pseudo-class selectors goed te laten werken, moet je ze in de exacte volgorde definiëren: link, visited, hover, active, focus. |
Voorbeeld:
a:link {
color: black;
}
a:visited {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
a:active {
color: gray;
}
a:focus {
color: green;
font-weight: bold;
}
 |
De naam van een pseudo-class is niet hoofdlettergevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven. |
Pseudo en HTML classen
Pseudo-classen kunnen gecombineerd worden met HTML-classen. Wanneer je in het volgende voorbeeld over de link beweegt, zul je zien dat deze verandert van kleur.
Voorbeeld:
a.vettetekst:hover {
color: green;
font-weight:bold;
text-decoration: none;
}
Een voorbeeld van het gebruik van de :hover pseudo-class op een <div> element:
Voorbeeld:
div {
color: white;
padding: 25px;
font-weight: bold;
text-align: center;
background-color: green;
}
div:hover {
background-color: red;
}
Een voorbeeld van een <div> element om een <p> element weer te geven als je de muisaanwijzer erop plaatst of er overheen beweegt:
Voorbeeld:
p {
display: none;
color: white;
background-color: purple;
font-weight: bold;
padding: 10px;
}
div:hover p {
display: block;
}
:first-child pseudo selector
De first-child pseudo-selector kun je gebruiken als je een element dat als eerste element binnen een ander element staat, een andere stijl wilt geven. In het volgende voorbeeld komt de selector overeen met elk <p> element dat het eerste onderliggende element van een element is.
In het volgende voorbeeld komt de selector overeen met het eerste i element binnen een ander element, elke keer dat i het eerste element binnen een ander element is, moet de tekst in het rood worden weergegeven.
In het volgende voorbeeld wordt de selector gebruikt om een element dat als eerste element binnen een ander element staat, een andere stijl te geven. Nu wordt het eerste p-element geselecteerd en wordt een stijl gegeven aan alle i-elementen binnen het eerste p-element.
:last-child pseudo selector
De last-child pseudo-selector kun je gebruiken als je een element dat als laatste element binnen een ander element staat, een andere stijl wilt geven.
In het onderstaande voorbeeld wordt het laatste li element geselecteerd en hiervan wordt de rechter rand verwijderd. Je kunt dit bijv. gebruiken bij een navigatie menu bovenin.
:nth-child pseudo selector
Door :nth-child(3) te gebruiken, kan je er specifiek voor kiezen om alleen het derde element te wijzigen.
Je kunt ook heel makkelijk even en oneven elementen selecteren en een andere stijl geven.
:lang pseudo selector
De lang pseudo-class selector maakt het mogelijk om speciale regels te definiëren voor verschillende talen. In het volgende voorbeeld is er voor het q element een stijl gedefinieerd met behulp van de lang pseudo-class selector.
