Pseudoklasse nth-of-type
Pseudoklassen nth-of-type vælger et element,
som er det n'te barn af en given type.
Det vil sige, hvis jeg skriver h2:nth-of-type(4)
- vil den 4. h2 i forælderen blive fundet (i
modsætning til nth-child,
som kun finder den h2, som er det
4. element i forælderen).
Syntaks
selector:nth-of-type(tal | odd | even | udtryk){
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| tal |
Et positivt tal startende fra 1. Angiver elementets nummer,
som vi vil henvende os til.
Nummereringen af elementer starter fra 1.
|
odd |
Ulige elementer. |
even |
Lige elementer. |
| udtryk |
Man kan sammensætte specielle udtryk med bogstavet n,
som betegner alle hele tal fra nul (ikke fra et)
til uendelig. Så, 2n - betyder alle lige
tal (startende fra det andet).
Hvordan forstår man dette? Vi indsætter i n sekventielt
tal fra 0 og så videre: hvis n = 0, så giver 2n 0 -
et sådant element findes ikke (nummerering af elementer starter fra 1),
hvis n = 1, så giver 2n 2 - det andet element, hvis n = 2,
giver 2n 4 - det fjerde element. Hvis man skriver 3n - vil dette
være hvert tredje element (startende fra det tredje), og så videre.
|
Eksempel
Lad os finde h2, som er den 2. h2
i forælderen:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Eksempel
Lad os finde alle lige h2:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Eksempel
Lad os finde alle ulige h2:
<div>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
<h2>overskrift</h2>
<p>afsnit</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
