Pseudoklas nth-last-of-type
Die pseudoklas nth-last-of-type kies
'n element wat die n-de kind van die
ouer van 'n gespesifiseerde tipe is, tel van die einde af.
Dit gedra soortgelyk aan nth-of-type,
maar die telling begin by die einde.
Sintaksis
selekteerder:nth-last-of-type(nommer | odd | even | uitdrukking) {
}
Waardes
| Waarde | Beskrywing |
|---|---|
| nommer |
'n Positiewe nommer vanaf 1.
Spesifiseer die nommer van die element waarna ons wil
verwys. Nummering van elemente begin by 1.
|
odd |
Onewe elemente. |
even |
Ewe elemente. |
| uitdrukking |
Spesiale uitdrukkings kan saamgestel word met die letter n,
wat alle heelgetalle van nul (nie een nie)
tot oneindig verteenwoordig. Dus, 2n - beteken alle ewe
nommers (vanaf die tweede).
Hoe om dit te verstaan? Vervang n opeenvolgend met
nommers vanaf 0 ens.: as n = 0, dan gee 2n 0 -
so 'n element bestaan nie (nummering begin by 1),
as n = 1, dan gee 2n 2 - die tweede element, as n = 2,
gee 2n 4 - die vierde element. As jy 3n skryf - dit is
elke derde element (vanaf die derde), ensovoorts.
|
Voorbeeld
Laat ons die h2 vind wat die 2-de h2
in die ouer vanaf die einde is:
<div>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Voorbeeld
Laat ons alle ewe h2's vanaf die einde vind:
<div>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Voorbeeld
Laat ons alle onewe h2's vanaf die einde vind:
<div>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
<h2>opschrift</h2>
<p>paragraaf</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
