Pseudoklasa nth-last-of-type
Pseudoklasa nth-last-of-type wybiera
element, który jest n-tym potomkiem
rodzica danego typu, licząc od końca.
Zachowuje się podobnie do nth-of-type,
tylko liczenie jest od końca.
Składnia
selektor:nth-last-of-type(liczba | odd | even | wyrażenie) {
}
Wartości
| Wartość | Opis |
|---|---|
| liczba |
Dodatnia liczba zaczynając od 1.
Określa numer elementu, do którego chcemy
się odwołać. Numeracja elementów zaczyna się od 1.
|
odd |
Nieparzyste elementy. |
even |
Parzyste elementy. |
| wyrażenie |
Można tworzyć specjalne wyrażenia z literą n,
która oznacza wszystkie liczby całkowite od zera (nie od jedności)
do nieskończoności. Tak, 2n - oznacza wszystkie parzyste
liczby (zaczynając od drugiego).
Jak to zrozumieć? Podstawiamy w n kolejno
liczby od 0 i tak dalej: jeśli n = 0, to 2n da 0 -
takiego elementu nie ma (numeracja elementów od 1),
jeśli n = 1, to 2n da 2 - drugi element, jeśli n = 2,
2n daje 4 - czwarty element. Jeśli napisać 3n - to
będzie każdy trzeci element (zaczynając od trzeciego), i tak dalej.
|
Przykład
Znajdźmy h2, który jest 2-gim h2
w rodzicu licząc od końca:
<div>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
</div>
h2:nth-last-of-type(2) {
color: red;
}
:
Przykład
Znajdźmy wszystkie parzyste h2 licząc od końca:
<div>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
</div>
h2:nth-last-of-type(even) {
color: red;
}
:
Przykład
Znajdźmy wszystkie nieparzyste h2 licząc od końca:
<div>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
<h2>tytuł</h2>
<p>akapit</p>
</div>
h2:nth-last-of-type(odd) {
color: red;
}
:
