---

 CSS Basiskennis  -  Selectoren 

Welke selectoren kunnen gebruikt worden?

Algemeen ~ Class en ID ~ Pseudo-classes en -elementen

Algemeen

Selectors kunnen zijn:

1. een element-naam (P)
2. een element-naam met een class-attribuut of een uniek ID-attribuut (zie hieronder) (P.voorbeeld, P#voorbeeld32)
3. alle elementen met een bepaald class-attribuut, of een uniek ID-attribuut (.voorbeeld, #voorbeeld32)
4. enkele elementen met bepaalde eigenschappen (pseudo-elementen of pseudo-classes, als A:link; zie hieronder)
5. een element dat binnen een ander element voorkomt
   (het 'buitenste' element wordt het eerst genoemd: FORM P)

Selectors kunnen worden gecombineerd met komma's ertussen:

H1, H2, H3 { font-family: sans-serif }

is gelijk aan:

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

Class en ID

Aan elk HTML-element in een document kan een class- of een ID-attribuut worden toegekend. Hierdoor wordt het mogelijk om een style-rule toe te passen op een beperkt deel van een document. Ook is het mogelijk de stijl te koppelen aan een deel van het document dat niet samenvalt met een bestaand HTML-element. Voeg dan een van de 'lege' elementen in: DIV voor een blok-selectie en SPAN voor een inline-selectie.

Een ID hoort slechts eenmaal gebruikt te worden en is uniek. Een ID kan ook andere functies hebben, bijvoorbeeld voor scripting en hypertext-navigatie. Een 'class' markeert een of meer elementen, en kan hergebruikt worden.

Voorbeeld van het gebruik van class:

<DIV class="inhoudsopgave">
<H2>Inhoud</H2>
<OL>
  <LI>nr 1</LI>
  <LI>nr 2</LI>
  <LI>nr 3</LI>
</OL>
</DIV>
... rest van het document ...

Pseudo-classes en -elementen

Pseudo-classes en -elementen krijgen hun eigenschappen op basis van een (eventueel tijdelijke) status die niet in het HTML-document is opgenomen. Op deze manier kun je eigenschappen toekennen aan anders onbereikbare onderdelen van het document.

• Een aanklikbare link heeft de pseudo-class :link
• Een link heeft de pseudo-class :visited wanneer deze recent bezocht is.
  Het hangt van de browser af wat daaronder wordt verstaan.
• Een link die wordt geactiveerd (bijvoorbeeld door een muisklik) heeft de pseudo-class :active (werkt alleen in Internet Explorer 4+, Opera 5 en Netscape)
• Een link waar een muis boven hangt heeft de pseudo-class :hover (CSS2, werkt alleen in Internet Explorer 4+, Opera 4+ en Netscape 6)
  Dit moet altijd na de :active regel worden ingesteld.

• De eerste letter van een element is een text-level pseudo-element met de class :first-letter (werkt alleen in Opera 3.5+ en Mozilla)
• De eerste regel van een element (dit is dus afhankelijk van vensterafmetingen, lettergroottes e.d.) is een block-level pseudo-element met de class :first-line (werkt alleen in Opera 3.5+ en Mozilla)

 

---