Pseudoklasse nth-of-type
Pseudoklassen nth-of-type velger et element
som er det n-te barnet av en gitt type.
Det vil si, hvis jeg skriver h2:nth-of-type(4)
- vil den fjerde h2 i forelderen bli funnet (i
motsetning til nth-child,
som bare vil finne den h2 som er det
fjerde elementet i forelderen).
Syntaks
velger:nth-of-type(tall | odd | even | uttrykk){
}
Verdier
| Verdi | Beskrivelse |
|---|---|
| tall |
Et positivt tall fra og med 1. Angir nummeret til elementet
vi vil targete.
Nummereringen av elementer starter fra 1.
|
odd |
Odde elementer. |
even |
Like elementer. |
| uttrykk |
Du kan lage spesielle uttrykk med bokstaven n,
som representerer alle heltall fra null (ikke fra én)
til uendelig. Så, 2n betyr alle like
tall (starter fra det andre).
Hvordan forstå dette? Vi erstatter n sekvensielt med
tall fra 0 og så videre: hvis n = 0, gir 2n 0 -
det finnes ikke noe slikt element (elementnummerering starter fra 1),
hvis n = 1, gir 2n 2 - det andre elementet, hvis n = 2,
gir 2n 4 - det fjerde elementet. Hvis du skriver 3n - vil det
være hvert tredje element (starter fra det tredje), og så videre.
|
Eksempel
La oss finne h2 som er den 2. h2
i forelderen:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Eksempel
La oss finne alle like h2:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Eksempel
La oss finne alle odde h2:
<div>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
<h2>overskrift</h2>
<p>avsnitt</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
