In CSS3 kun je gebruik maken van zogenoemde pseudo elementen. Met deze pseudo elementen kun je gedeeltes van HTML elementen van specifieke styling voorzien. Zo zou je bijvoorbeeld van een stuk tekst de eerste regel een andere styling kunnen geven dan de rest van de tekst.
En zo zijn er meer toepassingen van pseudo elementen. In de onderstaande video zie je enkele voorbeelden:
Hieronder zie je code voorbeelden van de pseudo elementen die in de video behandeld werden.
De pseudo elementen before en after
Dit zijn twee pseudo elementen die veel gebruikt worden. Je kunt hiermee iets voor en iets na een bepaald element laten weergeven.
Zo zou je bijvoorbeeld met het pseudo element "before" een plaatje kunnen tonen voor een koptekst. De code zou er als volgt uitzien:
De HTML code van een koptekst
<h1>Dit is een koptekst</h1>
En met de volgende CSS code kun je met het pseudo element "before" een plaatje tonen voor de koptekst:
h1::before {
content:url(plaatje.jpg);
}
Wil je een plaatje achter de koptekst laten zien, dan wordt het:
h1::after {
content:url(plaatje.jpg);
}
Merk op dat tussen de CSS selector en het pseudo element twee keer een dubbele punt staat (::).
De eerste regel van een tekst stylen
Dit kun je regelen met het pseudo element "first-line". Stel dat je voor alle alinea teksten de eerste regel vet gedrukt wilt hebben, dan regel je dit met deze CSS code:
p::first-line {
font-weight:bold;
}
Wil je alleen de eerste letter van een paragraaf vet gedrukt hebben, dan gebruik je het pseudo element "first-letter".
Geselecteerde teksten stylen
Stel iemand selecteert een stukje tekst op je site, dan kun je met het pseudo element "selection" bepalen hoe de styling van dit geselecteerde stukje tekst moet zijn. De CSS code daarvoor:
p::-moz-selection {
background:#000;
color:#fff;
}
p::selection {
background:#000;
color:#fff;
}
Met bovenstaande code krijgt een stukje geselecteerde tekst uit een alinea een zwarte achtergrondkleur met witte tekst. Merk ook op dat ik naast het pseudo element "selection" ook het pseudo element "-moz-selection" gebruik. Dit is nodig om het ook in Firefox te laten werken.
Succes met het stoeien met pseudo elementen !