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

cssselekteerder: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:

html<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>

cssh2:nth-last-of-type(2) {
  color: red;
}

Результат:

Voorbeeld

Laat ons alle ewe h2's vanaf die einde vind:

html<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>

cssh2:nth-last-of-type(even) {
  color: red;
}

Результат:

Voorbeeld

Laat ons alle onewe h2's vanaf die einde vind:

html<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>

cssh2:nth-last-of-type(odd) {
  color: red;
}

Результат: