Content opmaken met :first-child en :last-child
Voor bepaalde toepassingen is het handig als de opmaak van de eerste alinea van een pagina (<p>-tag) verschilt van de rest. Denk daarbij aan een artikel, dat begint met een korte samenvatting, zoals op deze bladzijde.
Hetzelfde kan gelden voor de laatste alinea. Als je naar beneden scrollt dan zie je dat de tekst van de laatste alinea een afwijkende kleur heeft. Dat geldt ook bij het eerste punt (<li>-tag) van de ongeordende lijsten (<ul>-tags) hier onder.
Met behulp van CSS is een en ander eenvoudig te realiseren. Op deze pagina wordt uitgelegd hoe je dat doet.
- De eerste paragraaf is opgemaakt met de pseudo-class :first-child. Bij de laatste paragraaf is de pseudo-class :last-child gebruikt.
- Het first-child ("eerste kind") is het eerste block-type HTML-element dat afstamt van zijn parent
("ouder"). In dit geval is dat <body>.
Het last-child ("laatste kind") is het laatste block-type HTML-element dat afstamt van zijn parent ("ouder"). Ook hier is dat <body>.
Voorbeeld: zie onderstaande code.
<body>
<h1>De Kop</h1>
<p>Eerste P-tag</p>
<p>Tweede P-tag</p>
<ul>
<li>Lijst-item 1</li>
<li>Lijst-item 2</li>
<li>Lijst-item 3</li>
</ul>
<p>Derde P-tag</p>
<ul>
<li>Lijst-item A</li>
<li>Lijst-item B</li>
<li>Lijst-item C</li>
</ul>
<p>Laatste P-tag</p>
</body>
<h1>is het eerste kind-element binnen de <body>. Dat betekent dat<p>Eerste P-tag</p>niet meer met :first-child kan worden opgemaakt. Het is nl. het tweede kind-element.- Dit effect lijkt lastig, als je toch
<p>Eerste P-tag</p>wilt opmaken met :first-child, in plaats van<;h1>. Het is eenvoudig te omzeilen, zie verder. <li>Lijst-item 1</li>en<li>Lijst-item A</li>zijn elk het eerste child binnen een <ul>-tag.<li>Lijst-item 3</li>en<li>Lijst-item C</li>zijn elk het laatste child binnen een <ul>-tag.<p>Laatste P-tag</p>is het laatste child binnen de <body>.
Het omzeilen van scope-problemen
Hierboven is genoemd dat het niet altijd duidelijk is welk block-element er nu het eerste, tweede, enz. child is. Dat heet een
'scope-probleem'.
Je omzeilt het door zelf parents te definiëren. Dat doe je door delen van je pagina in ter sluiten in <div>-tags,
die je een id meegeeft. Op deze pagina is één zo'n <div>-tag gebruikt, met id="OpmaakDemo.
Zie de code hier onder.
<body>
<h1>De Kop</h1>
<div; id="OpmaakDemo">
<p>Eerste P-tag</p>
<p>Tweede P-tag</p>
<ul>
<li>Lijst-item 1</li>
<li>Lijst-item 2</li>
<li>Lijst-item 3</li>
</ul>
<p>Derde P-tag</p>
<ul>
<li>Lijst-item A</li>
<li>Lijst-item B</li>
<li>Lijst-item C</li>
</ul>
<p>Laatste P-tag</p>
</div>
</body>
De CSS-code staat hier onder.
Opmerking: Het is overigens mogelijk om elk child apart te benoemen en daarmee scope-problemen te omzeilen. Zie daarvoor het item Content opmaken met :nth-child().
Gebruik:
- De CSS-code staat in de <HEAD>.
- De CSS-code<div>-tag staat in de <BODY>, deze omsluit het deel van je pagina waarbinnen je :first-child en :last-child wilt gebruiken.
De CSS-code voor het tweede voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
De regels die beginnen met div#OpmaakDemo gelden alleen binnen de tag <div; id="OpmaakDemo">. De regel voor li geldt vcor het hele document. Dat betekent dat deze werkt bij alle lijsten <ol> en <ul>. Op deze pagina zijn twee ongeordende lijsten (<ul>) gebruikt.<style>
div#OpmaakDemo p:first-child { color:navy; font-weight:bold }
div#OpmaakDemo p:last-child { color:magenta }
li:first-child { color:#00a }
</style>
Opmerking:
Dit is de laatste paragraaf. Deze is opgemaakt met :last-child.
