CSS 2.1 Selectors, deel 3

Noot: Deze serie over CSS selectors is afkomstig van 456bereastreet.com en is met toestemming van Roger Johansson vertaald. Hier en daar zal ik ongetwijfeld wat afwijken van de vertaling, omdat dit het volgens mij wat duidelijker maakt. Om dezelfde reden zal ik typische ?selector-termen? ook niet altijd vertalen.

Dit is het derde en laatste deel van de serie over CSS 2.1. selectors. In deel 1 ging het over de basisbeginselen zoals type selectors, class en ID selectors, de universele selectors en enkele selectors. In deel 2 werden de combinatoren, gecombineerde selectors, grouping en attribuut selectors onder handen genomen.

Deze keer gaat het over pseudo-classes en pseudo-elementen. Net als bij de wat meer geavanceerde selectors uit deel 2, worden de pseudo-classes en pseudo-elementen niet door alle browsers ondersteund. Dus dat is iets waar je op moet letten als je deze wilt gaan gebruiken. Je wilt namelijk ook niet dat content niet benaderbaar is door het gebrek aan CSS support van bepaalde browsers.

Pseudo-classes en pseudo-elementen

Pseudo-classes en pseudo-elementen kunnen worden gebruikt om elementen te stijlen die niet direct vanuit de document tree te benaderen zijn. Er is bijvoorbeeld geen enkel element dat de eerste regel of letter van een tekstblok beschrijft.

Pseudo-classes

Pseudo-classes matchen elementen gebaseerd op eigenschappen anders dan hun naam, attribuut of content.

:first-child

Deze pseudo-class matcht het element dat het eerste kind is van een ander element. Hiermee kun je bijvoorbeeld de eerste paragraaf van een artikel stijlen. Onderstaande regel is van toepassing op het eerste p element binnen een div met de class ‘artikel’.


div.artikel p:first-child { font-style: italic; }


Om alle p elementen te matchen die het eerste kind zijn van welke element dan ook, kun je gebruik maken van onderstaande regel.


p:first-child { font-style: italic; }


:link en :visited

De link pseudo-classes hebben affect op bezochte en onbezochte links. Deze twee toestanden kunnen nooit tegelijkertijd actief zijn. Je kunt immers geen bezochten en tegelijkertijd onbezochte link hebben.

Deze pseudo-classes zijn allen van toepassing op de hyperlink elementen, zoals beschreven in de documenttaal. Voor HTML betekent dit de aelementen met een href attribuut. En omdat het geen effect heeft op andere elementen zijn onderstaande regels gelijk.


a:link
:link


:hover, :active en :focus

The dynamische pseudo-classes kunnen gebruikt worden om de presentatie van bepaalde elementen aan te passen afhankelijk van de actie van de gebruiker.

:hover is van toepassing wanneer de gebruiker met de muis (of ander ‘aanwijsapparaat’) over een element gaat, maar het nog niet activeert (bijvoorbeeld erop klikt).

:active is van toepassing als een element geactiveerd wordt door de gebruiker. Voor muis gebruikers betekent dit als je de muisknop indrukt totdat je hem weer loslaat.

:focus is van toepassing op een element als daar de focus op ligt, bijvoorbeeld als het keyboard events accepteert.

Een element kan meerdere pseudo-classes tegelijkertijd matchen. Een element kan een :hover en een :focus hebben, zoals bijvoorbeeld:


input[type=text]:focus {
color: #f00;
background: #ffe;
}
input[type=text]:focus:hover {
background: #fff;
}


De eerste regel zal de input elementen matchen die een focus hebben. De tweede regel zal dezelfde elementen matchen wanneer deze ook ‘gehovered’ worden.

:lang

De taal pseudo-class (:lang) kan gebruikt worden om elementen te stijlen waarvan de content is gespecificeerd in een bepaalde taal (en dan wel menselijke taal en geen markup taal). De volgende regel definieert welke quotes er moeten gebruikt worden voor een inline quote in het Zweeds.


:lang(sv) { quotes: "201D" "201D" "2019" "2019"; }


Deze (menselijke) taal van een document wordt normaal gesproken gedefinieerd met het lang attribuut in HTML en het xml:lang attribuut in XHTML.

Pseudo-elementen

Pseudo-elementen geven auteurs gelegenheid om bepaalde delen van een document te benaderen en te stijlen, terwijl deze niet benaderbaar zijn als node in de document tree.

:first-line

Het :first-line pseudo-element is van toepassing op de eerste regel binnen een tekstblok. Dit kan alleen toegepast worden op block level elementen, inline-block, table-caption of een table-cell.

De lengte van de eerste regel hangt af van een paar factoren, waaronder de font-size en de breedte van het element waarin de tekst staat.

De volgende regel wordt toegepast op de eerste regel van de tekst in een paragraaf.


p:first-line {
font-weight: bold;
color: #600;
}


Noot: er zijn een aantal beperkingen aan de css eigenschappen die van toepassing zijn op het :first-line pseudo-element. Zie hiervoor The :first-line pseudo-element voor een lijst van eigenschappen die hierop van toepassing zijn.

:first-letter

Dit pseudo-element is van toepassing op de eerste letter (of cijfer) van een element en werkt alleen met block, list-item, table-cell, table-caption en inline-block elementen.

Onderstaande regel matcht het eerste karakter in een element met de class ‘preamble’.


.preamble:first-letter {
font-size: 1.5em;
font-weight: bold;
}


Net als bij het :first-line pseudo-element heeft :first-letter bepaalde beperkingen met betrekking tot de css eigenschappen. Zie The :first-letter pesudo-element voor de lijst met eigenschappen.

:before en :after

De :before en :after pseudo-elementen kunnen worden gebruikt om content toe te voegen voor of na een bepaald element.

Hier is een voorbeeld hoe je :before kunt gebruiken (zie ook het artikel Custom borders with advanced CSS):


.cbb:before {
content: "";
display:Block;
height: 17px;
width: 18px;
background: url(top.png) no-repeat 0 0;
margin: 0 0 0 -18px;
}


En hier een voorbeeld van het gebruik van :after waarmee je de URL toevoegt naar de link tekst.


a:link:after {
content: " (" attr(href) ") ";
}


Internet Explorer problemen

Voordat je zomaar alles gaat gebruiken van wat je net hebt geleerd over selectors moet je goed onthouden Internet Explorer (t/m versie 6) nogal een incompleet support voor CSS 2.1 selectors heeft. De volgende items worden niet ondersteund of geven problemen:

• Child selectors
• Adjacent sibling selectors
• Attribuut selectors
• Multiple class selectors
• De :first-child pseudo-class
• De :lang pseudo-class
• De :before en :after pseudo-elementen
• De :hover pseudo-class werkt alleen op a elementen
• De :focus pseudo-class wordt niet ondersteund. Voor a elementen die een focus hebben wordt de :active pseudo-class toegepast.

Een hele lijst, maar gelukkig worden in Internet Explorer 7 wel alle CSS 2.1 selectors ondersteund.

Nu heb je de kennis ? gebruik het ook goed!

Zo, dat is alles. Nu je een heleboel hebt geleerd over selectors in CSS 2.1, heb je heel wat in handen om je documenten te stijlen. Pas het zorgvuldig toe om je code schoon te houden en om de toegankelijkheid en gebruiksvriendelijkheid te verhogen. En blijf erop letten wat er gebeurd in oudere browsers die bepaalde selectors niet ondersteunen.

Bron: http://www.456bereastreet.com/archive/200509/css_21_selectors_part_3/

• Tweet