16. :nth-last-child() - CSS3

Przeznaczenie selektora `:nth-last-child()`

:nth-last-child(...) { ... }

Selektor :nth-last-child() odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :nth-last-child().

Cechy elementu HTML spełniają zasadę pseudoklasy :nth-last-child(), gdy w danym momencie dany element HTML jest elementem dzieckiem znajdującym się na określonej przez nas pozycji (w zawartości swojego elementu rodzica).

Selektor :nth-last-child() odszukuje elementy HTML w kodzie dokumentu HTML na podstawie parametru child, którego wartość musimy określić. Domyślnie odszukiwanie kolejnych elementów HTML odbywa się w orientacji od dołu do góry, w kodzie dokumentu HTML.

Parametry selektora `:nth-last-child()`

child

Przykładowe zapisy

:nth-last-child(even)

:nth-last-child(odd)

:nth-last-child(3)

:nth-last-child(n)

:nth-last-child(3n)

:nth-last-child(4n+3)

:nth-last-child(-2n+3)

:nth-last-child(2n-3)

child

Parametr child jest wymaganym parametrem selektora :nth-last-child(). Parametr child określa w jaki sposób selektor :nth-last-child() powinien odszukiwać kolejne interesujące nas elementy dzieci.

Wartość domyślna

brak

Dostępne wartości parametru `child`

even, odd, liczba całkowita, wzór: JUMPnSTART

even

Wartość even parametru child każe selektorowi :nth-last-child() odszukać elementy dzieci znajdujące się na parzystych pozycjach.

odd

Wartość odd parametru child każe selektorowi :nth-last-child() odszukać elementy dzieci znajdujące się na nieparzystych pozycjach.

liczba całkowita

Wartość parametru child w postaci dowolnej dodatniej liczby całkowitej każe selektorowi :nth-last-child() odszukać element dziecko znajdujący się na konkretnej pozycji.

wzór: JUMPnSTART

Według z góry zdefiniowanego wzoru możemy określić, w jaki sposób selektor :nth-last-child() powinien odszukiwać kolejne elementy dzieci.

Wyjaśnienie wzoru

JUMPnSTART

JUMP

Składnik JUMP nie jest wymaganym składnikiem wzoru JUMPnSTART. Składnik JUMP określa wartość przeskoku podczas odszukiwania kolejnych elementów dzieci.

Dostępne wartości

dowolna liczba całkowita

Wartości dodatnie

wartości dodatnie umożliwiają przeskok w przód od pozycji, na którą wskazuje wartość składnika START

Wartości ujemne

wartości ujemne umożliwiają przeskok w tył od pozycji, na którą wskazuje wartość składnika START

Wartość domyślna

Składnik n jest wymaganym składnikiem wzoru JUMPnSTART. Składnik n oddziela składnik JUMP od składnika START, dzięki czemu przeglądarka internetowa może rozróżnić wspomniane składniki JUMP oraz START.

START

Składnik START nie jest wymaganym składnikiem wzoru JUMPnSTART. Składnik START określa, od której pozycji (licząc od dołu do góry) powinno rozpocząć się odszukiwanie kolejnych elementów dzieci. Pierwszy element dziecko znajduje się na pozycji +1, natomiast następny w kolejności element dziecko (czyli drugi) znajduje się na pozycji +2 itd.
- Dostępne wartości
  - dowolna liczba całkowita
- Sposób podawania
  - dla wartości dodatnich należy podać znak +, a dla wartości ujemnych należy podać znak -
- Wartość domyślna
  - +0

Informacje techniczne o selektorze `:nth-last-child()`

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor `:nth-last-child()`

p:nth-last-child(3n-2) {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

p:nth-last-child(3n-2) { color:red; }

p:nth-last-child(3n-2)

do każdego elementu p, który jest elementem dzieckiem swojego elementu rodzica oraz znajduje się na co trzeciej pozycji (licząc od dołu do góry oraz od pozycji -2)

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kurs CSS</title>

    <style>
      p:nth-last-child(3n-2) {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p>"p" dziecko numer 12 elementu "div" (licząc od dołu)</p>
      <p>"p" dziecko numer 11 elementu "div" (licząc od dołu)</p>
      <p>"p" dziecko numer 10 elementu "div" (licząc od dołu)</p>
      <div>"div" dziecko numer 9 elementu "div" (licząc od dołu)</div>
      <p>"p" dziecko numer 8 elementu "div" (licząc od dołu)</p>
      <p>"p" dziecko numer 7 elementu "div" (licząc od dołu)</p>
      <div>"div" dziecko numer 6 elementu "div" (licząc od dołu)</div>
      <p>"p" dziecko numer 5 elementu "div" (licząc od dołu)</p>
      <p>"p" dziecko numer 4 elementu "div" (licząc od dołu)</p>
      <div>"div" dziecko numer 3 elementu "div" (licząc od dołu)</div>
      <p>"p" dziecko numer 2 elementu "div" (licząc od dołu)</p>
      <p>"p" dziecko numer 1 elementu "div" (licząc od dołu)</p>
    </div>

  </body>
</html>

Rezultat

Interpretacja selektora `:nth-last-child()`

Previous15. :nth-child() - CSS3 Next17. :nth-of-type() - CSS3

Last updated 1 month ago

hashtagPrzeznaczenie selektora :nth-last-child()

hashtagParametry selektora :nth-last-child()

hashtagDostępne wartości parametru child

hashtagWyjaśnienie wzoru

hashtagInformacje techniczne o selektorze :nth-last-child()

hashtagPrzykładowa reguła CSS, selektor :nth-last-child()

hashtagWyjaśnienie przykładowej reguły CSS

hashtagKod źródłowy przykładowego dokumentu HTML

hashtagRezultat

hashtagInterpretacja selektora :nth-last-child()