CSS Pseudo classes

Dit keer een kort stukje over een klein maar waardevolle mogelijkheden in CSS: Pseudo Classes. Pseudo classen worden gebruikt om een bepaald  effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die al aardig ingeburgerd is in het css gebruik. Met :hover kan je bijvoorbeeld  een link een andere css class geven als je er met de muis overheen beweegt. Recent zijn er enkele classen bijgekomen, zo ook de :before en :after elementen

Compatibility  van de nieuwe pseudo classen

Zoals zo vaak behandel ik alleen nieuwe technieken die aardig worden ondersteund door modernere browsers. Zo kunnen deze nieuwe pseudo classen worden gebruikt in de huidige versies van alle browsers. In Internet Explorer 7 waren deze nog niet aanwezig, maar in 8 zit de functionaliteit er volledig in. Ook Chrome, Safari, Firefox en Opera doen ondersteuenen al een tijdje deze classen.

Gebruik van pseudo classes

Pseudo classes kunnen gebruikt worden op bijna alle CSS classes door gebruik te maken van een dubbele punt (“:”) en de naam van de pseudo class. Net als de bekende ¬†:hover. Bijvoorbeeld:

[css]
a:hover {color:red;}
[/css]

Pak het eerste kind met :first-child

Soms moet je binnen een pagina elk eerste element anders stijlen dan de rest. Daarvoor bestaat er first-child. Hiermee pak je van de genoemde classe het eerste element. Zo kan je bijvoorbeeld elke eerste paragraaf binnen een document een afwijkende stijl geven

[css]
p:first-child {
font-style: oblique;
}
[/css]

Zo kunnen ook eerste elementen in een lijst of rij in tabel een afwijkende stijl worden gegeven. In dat geval veranderd er wel iets, omdat het hoofdelement meerdere malen voor kan komen. In dit geval geven we aan dat er (eventueel) meerdere tabellen zijn in de css met de volgende code:

[css]
table > tr:first-child {
font-weight:bold;
}
[/css]

Andersom kunnen ook alle tr in alleen de eerste table een stijl meegegeven worden

[css]
table:first-child tr {
font-weight:bold;
}
[/css]

:before en :after css elementen

Ook een handige en nog niet veel gebruikte CSS elementen zijn de :before en :after pseudo elementen. Hiermee kan er voor of na het betreffende element een stuk inhoud worden toegevoegd. Wil je bijvoorbeeld voor elke quote een tekstje “quote:” dan kan dat door middel van css.

[css]
q:before {
content: "Quote:";
}
[/css]

Dan kunnen we ook nog aanhalingstekens om het geheel heen plaatsen (let op dat deze wel “ge-escaped” moeten worden, de backslash geeft aan dat de quote lettterlijk genomen moet worden en niet het inde van de tekst is.)

[css]
q:before {
content: "Quote: \" ";
}

q:after {
content: "\" "
}
[/css]

Het is ook mogelijk om afbeeldingen mee te geven aan het begin of einde van een element. Bijvoorbeeld een plaatje voor elke paragraaf. Of alleen de eerste paragraaf in combinatie met first-child.

[css]
/* Plaatje voor elke paragraaf */
p:before {
content: url(/images/mijn_image.gif);
}

/* alleen voor de eerste paragraaf */
p:first-child:before {
content: url(/images/mijn_image.gif);
}
[/css]

De :lang pseudo class

Voor ontwikkelaars die zich moeten richten op websites in verschillende talen geeft CSS tegenwoordig wat meer hulpmiddelen in de vorm van bijvoorbeeld de :lang pseudo classe. Hiermee kan er een regel worden gezet voor een bepaalde taal. Laten we voor Nederlanders de tekst maar oranje maken

[css]
p:lang(nl) {
color:#FF6633;
}
[/css]

Natuurlijk zijn er ook betere toepassingen, zoals in Noorwegen gebruiken ze het bekende “golfje” als teken voor quotes. Nu kunnen we in combinatie met de :before en :after classe van hierboven makkelijk alle quotes voorzien van andere tekens.

[css]
/* eerst de ‘normale situatie zetten */
q:before {
content: "\" ";
}

q:after {
content: " \" ";
}

/* alleen voor de Noorse lezers */
q:before {
content: " ~";
}

q:after {
content: "~ ";
}
[/css]

Dit kan ook korter met de quotes declaratie

[css]
q:lang(no) {
quotes: "~" "~";
}
[/css]

:first-line en :first-letter classe

Als laatste wil ik de :first-line en :first-letter elementen bespreken. Hiermee kan je de eerste regel of eerste letter van een element een stijl geven. Als je de eerste regel van paragraven dik gedrukt wilt hebben en de eerste letter een stuk groter (zoals de oude monnik boekwerken), dan is dit kinderlijk eenvoudig met deze pseudo-elementen.

[css]
p:first-line {
font-weight: bold;
}

p:first-letter {
font-size: 50px;
}
[/css]

Let wel op dat de eerste regel de eerste visuele is. CSS herkent geen punten maar wacht tot een regelomhaal. Dat is dus de eerste
of automatische regelomhaal omdat de container te klein is.

Doe meer met CSS

Zoals je kan zien is er met CSS steeds meer mogelijk. Een logisch vervolg van het belangrijker worden van de client-side en front-end programmeren. HTML5, CSS3 en javascript gaan hand in hand samen deze ontwikkeling door. Een ontwikkeling waardoor wij straks steeds meer applicaties web-based kunnen maken, maar dat web-based applicaties ook steeds meer gebruik kunnen gaan maken van de client.

Related articles by Zemanta

• The Mysterious Pseudo Class in CSS (tc.eserver.org)
• An Event Apart: Object Oriented CSS (lukew.com)
• 50 New Useful CSS Techniques, Tools and Tutorials (smashingmagazine.com)
• When can I use … is a great resource for browser compatibility advice (downloadsquad.com)