Content opmaken met :nth-child()
:nth-child(Parameter) is een CSS-pseudoklasse, waarmee je eigenschappen van HTML-elementen die in volgorde staan, kunt aanpassen. De Parameter is een geheel getal, een formule of een keyword, zie onderstaande tabel.
| waarde | Betekenis | |
| (getal) | Dit moet een geheel, positief getal zijn.
Voorbeeld: :nth-child(2). Het tweede element wordt geselecteerd. De telling begint bij 1. |
|
| (formule) | Dit is een formule van de vorm an + b.
Hierin is a een stapgrootte, n is een teller die begint bij nul en b is een offset. De code :nth-child(3n+1)
werkt op de element-nummers 1, 4, 7, 10, enz.: Hierin is a=3 en b=1. Voor n=0 is 3n+1 = 1; voor n=1 is 3n+1 = 4;
voor n=2 is 3n+1 = 7, enzovoort. |
|
| (keyword) | Mogelijkheden zijn "odd"
en "even". Bij "odd" werkt :nth-child() op alle oneven element-nummers, bij "even" werkt :nth-child()
op alle even element-nummers. |
De CSS-code heeft de volgende vorm:
p:nth-child(4) {
CSS-eigenschappen
}
Er is dus een 'gewone' selector, gevolgd door een dubbele punt en de aanroep van nth-child. In het document zou
de CSS-code (lees: de opmaak) van de vierde <p>-tag worden aangepast.
N.B.: In de aanroep van :nth-child() staan rond de parameter geen aanhalingstekens.
Als voorbeeld nemen we onderstaande tabel:
| Tabel | Kop 1 | Kop 2 |
|---|---|---|
| Regel 1 | Kolom 1 | Kolom 2 |
| Regel 2 | Kolom 1 | Kolom 2 |
| Regel 3 | Kolom 1 | Kolom 2 |
| Regel 4 | Kolom 1 | Kolom 2 |
| Regel 5 | Kolom 1 | Kolom 2 |
| Regel 6 | Kolom 1 | Kolom 2 |
De regels met data zijn afwisselend geel en paarsblauw gekleurd. Dat is gedaan door met behulp van :nth-child(even) de regels 2, 4, 6, enz. geel te kleuren. De paarsblauwe kleur is gewoon de achtergrondkleur van het document.
De bovenste regel is zeegroen, met witte, vette letters. Dat is gedaan door de CSS van regel 1 te wijzigen met :nth-child(1).
De volledige code van dit voorbeeld is:
<style>
#voorbeeld {
border:1px solid navy;
margin:0 auto 0 auto;
padding:1px;
}
#voorbeeld tr th {
font-weight:bold;
color:white;
text-align:center
}
#voorbeeld tr td {
padding:1px;
width:70px;
text-align:center;
}
#voorbeeld tr:nth-child(even) {
background:#ffd;
}
#voorbeeld tr:nth-child(1) {
background:teal;
}
</style>
<table id="voorbeeld">
<tr><th>Tabel</th><th>Kop 1</th><th>Kop 2</th></tr>
<tr><td>Regel 1</td><td>Kolom 1</td><td>Kolom 2</td></tr>
<tr><td>Regel 2</td><td>Kolom 1</td><td>Kolom 2</td></tr>
<tr><td>Regel 3</td><td>Kolom 1</td><td>Kolom 2</td></tr>
<tr><td>Regel 4</td><td>Kolom 1</td><td>Kolom 2</td></tr>
<tr><td>Regel 5</td><td>Kolom 1</td><td>Kolom 2</td></tr>
<tr><td>Regel 6</td><td>Kolom 1</td><td>Kolom 2</td></tr>
</table>
In het bovenstaande voorbeeld wordt de declaratie :nth-child() vooraf gegaan door een andere selector, nl. #voorbeeld. Dat is de id van de tabel. Je kunt hier elke geldige CSS-selector neerzetten. In principe kun je de eerste selector ook weglaten. :nth-child() telt dan vanaf de <body>-tag.
Op deze site staan een paar items die gebruik maken van :nth-child():
• Infographics maken. :th-child() wordt gebruikt bij het tonen
van de hoogste en de laagste temperatuur.
• Draaiende pagina-overgangen. Het document is een <article>,
verdeeld in twee <section>s. De linkerhelft (eerste section) draait, de rechterhelft (tweede section)
is statisch.
• Wereldkaart. :nth-child() wordt gebruikt bij het één
voor één zichtbaar maken van de landen.
Opmerkingen:
Als je alleen het eerste en/ of het laatste child-element wilt gebruiken, kun je ook :first-child
en/of :last-child inzetten in plaats van :nth-child().
:nth-child() heeft een lastige bijwerking. Stel: je hebt 4 achtereenvolgende <p>-tags. Van de eerste stel je de CSS in met p:nth-child(1) en de tweede met p:nth-child(2). De derde en vierde <p>-tag krijgen nu de instellingen die met p:nth-child(2) zijn gemaakt, terwijl daar niet om is gevraagd!
De function :nth-child() werkt op elementen die een parent hebben, dus een lagere plaats in de DOM-tree dan
de <body>. Er is bestaat ook een function nth-of-type() waarmee je elementen kunt selecteren en veranderen,
onafhankelijk van de plaats van zo'n element in de DOM-hiërarchie. Zo selecteert de code
p:nth-of-type(4)
de vierde <p>-tag in het document, onafhankelijk van waar die in het document staat.
