<Inhoud>   basiskennis: <Inleiding> <Regels> <Selectoren> <Koppelen>


 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.

 


Copyright © 2000, Rijk van Geijtenbeek, mail-adres: rijk@iname.com.