Gebruikerswaardering: 0 / 5

Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Een vaak voorkomende situatie is, dat je bepaalde items in je lijsten een specifieke opmaak wilt geven. Bijv. alleen de oneven items, alleen het eerste item, alleen de eerste vier items, alles vanaf item 7, items 2, 5, 8, enz.

Je kunt dat simpelweg oplossen door ieder item dat je een speciale opmaak wilt meegeven een class te geven. Maar wanneer je dan een item tussenvoegt, of de volgorde aanpast, dan heb je behoorlijk wat werk om dat weer recht te breien. Ook wanneer je lijst dynamisch wordt opgebouwd, is het vaak een behoorlijke puzzle om op die manier ieder gewenst item die speciale opmaak te geven.

Let wel goed op, dat je de juiste elementen opgeeft waarop je dit wilt toepassen. Wanneer ik in onderstaande voorbeelden niet specifiek zou aangeven, dat het om een <li> gaat binnen een <ul> met een specifiek id, dan zouden ook bijvoorbeeld alle zoveelste paragrafen binnen een div of alle zoveelste afbeeldingen binnen een pagina geraakt kunnen worden.

Want hoewel we in onderstaande voorbeelden iedere keer een ongeordende lijst (<ul>) gebruiken, werkt dit mechanisme eigenlijk voor alle elementen.

Eerst een eenvoudig voorbeeld:

Voorbeeld
View source
  1. <ul>
  2. <li>Audi</li>
  3. <li>BMW</li>
  4. <li>Ferrari</li>
  5. <li>Ford</li>
  6. <li class="speciaal">Mercedes</li>
  7. <li>Opel</li>
  8. <li>Porsche</li>
  9. <li>Renault</li>
  10. <li>Volkswagen</li>
  11. <li>Volvo</li>
  12. </ul>

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Hier heeft het 5e item een speciale opmaak gekregen door de class 'speciaal' toe te voegen.

Als eerste laten we zien, dat het mogelijk is om heel specifiek aan te geven, dat alleen item nummer x die speciale opmaak moet krijgen. Hierbij geldt, dat het eerste item wordt gezien als item nummer 1, niet - zoals vaak gebeurt bij indexen - als nummer 0.

In het volgende voorbeeld heeft item nummer 4 speciale opmaak gekregen. Niet door een class aan de <li> toe te voegen, maar door in de CSS opmaak op te nemen voor dit 4e item: li:nth-of-type(4) { ... }.

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Wat we hier doen, is een zogenaamde pseudo class toe te voegen aan het list-item :nth-of-type(4)

In plaats van een nummer kunnen we hier ook tekst opnemen. We hebben daarbij de keuze tussen odd en even. Hiermee worden krijgen respectievelijk de oneven of de even items in de lijst de gewenste opmaak.

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Iets moeilijker wordt het wanneer we in plaats van een cijfer, of odd/even, een formule gaan gebruiken. Die formule is bijv. 3n+2.

Voor ieder item wordt n als tellertje bijgehouden, beginnend bij 0. Door de genoemde formule te gebruiken, zullen de volgende items worden aangepast: (3x0 + 2 = 2, 3x1 + 2 = 5, 3x2 + 2 = 8, 3x3 + 2 = 11). Omdat we hier maar 10 items hebben, zal die laatste dus worden genegeerd.

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Door creatief om te gaan met deze formule is het ook mogelijk om alleen de eerste (bijv.) vier items te markeren. De formule die we hiervoor gebruiken is -n+4. De volgende items worden nu aangepast: (-0 + 4 = 4, -1 + 4 = 3, -2 + 4 = 2 en -3 + 4 = 1).

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Wanneer je - andersom - alles vanaf een bepaald item (bijv. 7) wilt markeren, dan kan dat met de formule n+7

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

In één van de eerste voorbeelden hierboven liet ik al zien, dat we een specifiek item konden markeren (4). Er is nog een andere manier om dat te doen. Dit is met behulp van pseudo class :first-of-type, die specifiek bedoeld is om het eerste item te markeren. En in de verwachting, dat we het daarmee niet in één keer te moeilijk maken: Om het laatste item te markeren hebben we dan :last-of-type.

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Daarbij geldt natuurlijk dat :first-of-type identiek is aan :nth-of-type(1). Maar ook :last-of-type heeft zo'n equivalent, namelijk :nth-last-of-type(1). Deze pseudo class begint vanaf achteraan in de lijst met elementen en op basis van het getal dat wordt meegegeven, wordt de zoveelste waarde van achteren gemarkeerd. Hieronder laten we dat zien met :nth-last-of-type(3):

  • Audi
  • BMW
  • Ferrari
  • Ford
  • Mercedes
  • Opel
  • Porsche
  • Renault
  • Volkswagen
  • Volvo

Van type naar child

Waar we tot nu toe alleen nog gekeken hebben naar pseudo classes die kijken naar een specifiek type, kunnen we ook gaan kijken naar alle children van een bepaald element. Daarvoor stappen we voor het gemak even af van het voorbeeld met onze ongeordende lijst en maken we een nieuw voorbeeld met een <div> met daarin een aantal paragrafen.

Voorbeeld
View source
  1. <div>
  2.     <p>Dit is paragraaf 1</p>
  3.     <p>Dit is paragraaf 2</p>
  4.     <p>Dit is paragraaf 3</p>
  5.     <p>Dit is paragraaf 4</p>
  6.     <p>Dit is paragraaf 5</p>
  7.     <p>Dit is paragraaf 6</p>
  8.     <p>Dit is paragraaf 7</p>
  9.     <p>Dit is paragraaf 8</p>
  10.     <p>Dit is paragraaf 9</p>
  11.     <p>Dit is paragraaf 10</p>
  12. </div>

Dit is paragraaf 1

Dit is paragraaf 2

Dit is paragraaf 3

Dit is paragraaf 4

Dit is paragraaf 5

Dit is paragraaf 6

Dit is paragraaf 7

Dit is paragraaf 8

Dit is paragraaf 9

Dit is paragraaf 10

Hierop kunnen we - net als we hierboven al hebben gezien - :nth-child(n) (met cijfers en formules), :first-child, :last-child en :nth-last-child(n) toepassen en het effect zal exact hetzelfde zijn. Als voorbeeld is hierboven :nth-child(2).

Er is echter wel degelijk een verschil tussen de 'of-type' en 'child' varianten. Waar je met de 'of-type'-variant expliciet kijkt naar alles van hetzelfde type, kijk je bij de 'child'-variant slechts naar het zoveelste kind van de parent, wat dat ook is. Dat verschil is goed te zien, wanneer we ons bovenstaande voorbeeld enigszins aanpassen:

Voorbeeld
View source
  1. <div id="childtype_div2">
  2.     <p>Dit is paragraaf 1</p>
  3.     <p>Dit is paragraaf 2</p>
  4.     <p>Dit is paragraaf 3</p>
  5.     <p>Dit is paragraaf 4</p>
  6.     <p>Dit is paragraaf 5</p>
  7.     <p>Dit is paragraaf 6</p>
  8.     <div>
  9.         <p>Dit is paragraaf 7</p>
  10.     </div>
  11.     <p>Dit is paragraaf 8</p>
  12.     <p>Dit is paragraaf 9</p>
  13.     <p>Dit is paragraaf 10</p>
  14. </div>

Dit is paragraaf 1

Dit is paragraaf 2

Dit is paragraaf 3

Dit is paragraaf 4

Dit is paragraaf 5

Dit is paragraaf 6

Dit is paragraaf 7

Dit is paragraaf 8

Dit is paragraaf 9

Dit is paragraaf 10

Wanneer we nu eerst :nth-child(2n) toepassen, waarmee we feitelijk ieder 2e item markeren (ongeacht het type), dan ziet dat er als volgt uit:

Dit is paragraaf 1

Dit is paragraaf 2

Dit is paragraaf 3

Dit is paragraaf 4

Dit is paragraaf 5

Dit is paragraaf 6

Dit is paragraaf 7

Dit is paragraaf 8

Dit is paragraaf 9

Dit is paragraaf 10

Wanneer we ditzefde echter doen met :nth-of-type(2n) dan heeft dit opeens een ander effect. De <div> van paragraaf 7 wordt hier overgeslagen:

Dit is paragraaf 1

Dit is paragraaf 2

Dit is paragraaf 3

Dit is paragraaf 4

Dit is paragraaf 5

Dit is paragraaf 6

Dit is paragraaf 7

Dit is paragraaf 8

Dit is paragraaf 9

Dit is paragraaf 10

Speciaal voor deze situatie is er nog een extra variant te bedenken. Binnen deze <div> hebben we immers maar een andere <div>. En laten ze daarvoor ook iets hebben: :only-of-type:

Dit is paragraaf 1

Dit is paragraaf 2

Dit is paragraaf 3

Dit is paragraaf 4

Dit is paragraaf 5

Dit is paragraaf 6

Dit is paragraaf 7

Dit is paragraaf 8

Dit is paragraaf 9

Dit is paragraaf 10

Op deze manier kun je overigens ook nog gebruik maken van :only-child. Daarmee markeer je bijvoorbeeld alle paragrafen, als ze als enige 'child' binnen hun 'parent' voorkomen, dus als er binnen één <div> meerdere paragrafen voorkomen, dan zul je niets zien veranderen, wanneer er maar één paragraaf als enige element binnen die <div> voorkomt, dan wordt die wel opgemaakt.

Wat we ten slotte ook nog willen noemen, is dat je ook 'negatief' kunt markeren. Het is bijvoorbeeld mogelijk om alle elementen die geen <p> zijn op te maken. Dit doe je met de pseudo class :not(p). Of je dit vaak nodig hebt weet ik niet, maar als je het nodig hebt, dan is het altijd goed om te weten dat het kan!

Afronding

Dat was een behoorlijk lang verhaal over pseudo classes die je in je CSS-code kunt toepassen om uit een hele reeks met elementen binnen een 'parent'-element leuke dingen te doen met één of meerdere daarvan. Uit de vele bovenstaande voorbeelden is gebleken, dat nagenoeg alles mogelijk is. Vooral door creatief gebruik te maken van formules is er vaak nog meer mogelijk dan je zo op het eerste gezicht zou denken.