CSS Pseudo selectors :before, :after, :focus en :first-child
In de serie over CSS selectors ga ik het vandaag hebben over enkele bijzondere selectors. Ten eerste twee selectors om extra tekst te genereren, :before en :after. Daarnaast de pseudo selector :first-child en :focus.
:before
Het pseudo element kan iets wat met geen andere selector kan, namelijk het vooraf laten komen van content bij een element.
Een voorbeeld. Stel je hebt een lijst met links, maar enkele links zijn extra waardevol. Als het ware een supertip.
Deze links kun je vooraf laten gaan met de tekst ‘Supertip’. Dit kun je natuurlijk doen door in je HTML code deze tekst toe te voegen, maar met de :before selector kun je het jezelf makkelijker maken.
Dit kan namelijk wel eens van pas komen als je de opzet van je site aanpast zonder aan de HTML code te komen. Makkelijke uiterlijke aanpassingen doe je dan met je CSS.
Eenvoudig toevoegen
Een :before selector is eenvoudig in te voegen. Maak eerst een class aan die we de naam ’tip’ geven (.tip dus). Voeg deze class toe aan de paragraaf of link die de extra toevoeging krijgt. Bijvoorbeeld
Linktekst
Aan je CSS stijlblad voeg je dan de volgende code toe:
a.tip:before {content: "Super Tip!" }Het resultaat ziet er dan zo uit:
Let er wel op dat het hier gaat om gegenereerde content. Deze content komt dus niet voor in je HTML code. Je kunt bijvoorbeeld ook invoegen hoe een lijst met punten wordt weergegeven.
In Internet Explorer 6 en 7 kan :before en :after niet worden toegepast.
:after
Net zoals de :before selector kun je met de :after pseudo selector content genereren die na een element geplaatst wordt. Heel vaak wordt dit gebruikt om een quote bijvoorbeeld af te sluiten met sluitende aanhalingstekens.
:first-child
Vanuit het eerdere artikel over de HTML stamboom gaf ik al aan wat een ‘child’ is. Een tag die direct verbonden is met een andere tag. Een <p> is een ‘child’ van de <body>-tag.
Om het eerste element van meerdere te selecteren kun je gebruik maken van het :first-child pseudo element.
Ter verduidelijking een voorbeeld. Een ongeordende lijst, <ul>, kan meerdere lijst onderdelen, <li>, hebben. Je kunt dan ervoor zorgen dat het eerste punt van de lijst vetgedrukt is door :first-child te gebruiken.
Dit doe je in CSS met
li:first-child { font-weight: bold; }Het resultaat van de drie zaken zie je hieronder in de afbeelding.
Omdat je enkel de naam van het child element gebruikt, en niet het ‘ouder’ element, wordt enkel de eerste li gestyled. In het geval dat je een geordende lijst gebruikt zal deze dezelfde stijl toegepast krijgen.
Je moet hier goed op letten. Zo zou je denken dat je hiermee bijvoorbeeld een eerste paragraaf vetgedrukt kunt maken, maar meestal gaat hier nog wel een andere tag aan vooraf.
Het gebruiken van de :first-child selector is dan ook enkel aan te raden als je er goed mee weet om te gaan.
:focus
Met de :focus selector kun je min of meer hetzelfde bewerken als met :hover. Met :hover kun je een aanpassing activeren wanneer er met de muis over een bepaald onderdeel gegaan worden. De :focus komt in actie als een bezoeker een bepaald onderdeel selecteert. Een mooi voorbeeld is een invulformulier waarbij er iets visueels in beeld komt als je een bepaald veld selecteert.
Activeer onderstaand tekstveld eens door er met de muis in te klikken. Het veld wordt geactiveerd.
Met :focus kun je bovenstaand tekstveld bijvoorbeeld een lichtgele achtergrond meegeven.
input:focus { background-color: #FFFFCC; }Het resultaat kun je bekijken op de pagina met alle bovenstaande pseudo selectors als voorbeeld. De stijlen vind je in het CSS bestand.
Ook hier geldt weer dat IE 6 en 7 niets kunnen met deze pseudo selector.
Dit is het derde deel van vier artikelen over CSS selectors
Artikel 1 – CSS selectors voor beginners
Artikel 2 – CSS selectors, de familie
Artikel 3 – Pseudo selectors :before, :after, :first-child en :focus.
artikel 4 – komt nog
Merk op dat pseudo elementen iets anders is dan pseudo selectors.
Elementen krijgen in CSS3 ook een dubbele dubbele punt, bijv ::before en ::after. Selectors een enkele.
Dit artikel beschrijft 3 pseudo elementen; ::before, ::after en ::first-child en 1 pseudo selectors; :focus