Pseudoclasa nth-last-of-type
Pseudoclasa nth-last-of-type selectează
un element care este al n-lea descendent
al părintelui de tip specificat, numărând de la sfârșit.
Se comportă similar cu nth-of-type,
doar că numărătoarea se face de la sfârșit.
Sintaxă
selector:nth-last-of-type(număr | odd | even | expresie) {
}
Valori
| Valoare | Descriere |
|---|---|
| număr |
Număr pozitiv începând cu 1.
Specifică poziția elementului căruia dorim să
i se aplice stilurile. Numerotarea elementelor începe de la 1.
|
odd |
Elementele impare. |
even |
Elementele pare. |
| expresie |
Pot fi compuse expresii speciale cu litera n,
care reprezintă toate numerele întregi de la zero (nu de la unu)
până la infinit. Astfel, 2n înseamnă toate numerele pare
(începând cu al doilea).
Cum înțelegem asta? Înlocuim în n succesiv
numere de la 0 și așa mai departe: dacă n = 0, atunci 2n dă 0 -
un astfel de element nu există (numerotarea elementelor începe de la 1),
dacă n = 1, atunci 2n dă 2 - al doilea element, dacă n = 2,
2n dă 4 - al patrulea element. Dacă scriem 3n - acesta
va fi fiecare al treilea element (începând cu al treilea), și așa mai departe.
|
Exemplu
Să găsim h2 care este al 2-lea h2
în părinte numărând de la sfârșit:
<div>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Exemplu
Să găsim toate elementele h2 pare numărând de la sfârșit:
<div>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Exemplu
Să găsim toate elementele h2 impare numărând de la sfârșit:
<div>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
<h2>titlu</h2>
<p>paragraf</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
