18. :nth-last-of-type() - CSS3

Przeznaczenie selektora :nth-last-of-type()

:nth-last-of-type(...) { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :nth-last-of-type(), gdy w danym momencie dany element HTML jest elementem swojego typu znajdującym się na określonej przez nas pozycji względem ewentualnych pozostałych elementów dzieci swojego typu należących do wspólnego elementu rodzica.

Selektor :nth-last-of-type() 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-of-type()

child

Przykładowe zapisy

:nth-last-of-type(even)

:nth-last-of-type(odd)

:nth-last-of-type(3)

:nth-last-of-type(n)

:nth-last-of-type(3n)

:nth-last-of-type(4n+3)

:nth-last-of-type(-2n+3)

:nth-last-of-type(2n-3)

child

• Parametr child jest wymaganym parametrem selektora :nth-last-of-type(). Parametr child określa w jaki sposób selektor :nth-last-of-type() powinien odszukiwać kolejne interesujące nas elementy swojego typu będące elementami dziećmi należącymi do wspólnego elementu rodzica.

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-of-type() odszukać elementy swojego typu znajdujące się na parzystych pozycjach.

odd

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

liczba całkowita

• Wartość parametru child w postaci dowolnej dodatniej liczby całkowitej każe selektorowi :nth-last-of-type() odszukać element swojego typu 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-of-type() powinien odszukiwać kolejne elementy swojego typu będące elementami dziećmi należącymi do wspólnego elementu rodzica.

Wyjaśnienie wzoru

JUMPnSTART

JUMP

• Składnik JUMP nie jest wymaganym składnikiem wzoru JUMPnSTART. Składnik JUMP określa wartość przeskoku w przód podczas odszukiwania kolejnych elementów swojego typu będących elementami dziećmi należącymi do wspólnego elementu rodzica.

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

• 1

n

• 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 swojego typu będących elementami dziećmi należącymi do wspólnego elementu rodzica. Pierwszy element swojego typu znajduje się na pozycji +1, natomiast następny w kolejności element swojego typu (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-of-type()

ograniczenie - elementy HTML

• brak

ograniczenie - właściwości CSS

• brak

Przykładowa reguła CSS, selektor :nth-last-of-type()

p:nth-last-of-type(3n+4) {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

p:nth-last-of-type(3n+4) { color:red; }

p:nth-last-of-type(3n+4)

• do każdego elementu p, który jest (licząc od dołu do góry oraz od czwartego elementu typu p włącznie) co trzecim elementem typu p względem pozostałych elementów dzieci typu p należących do wspólnego elementu rodzica

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-of-type(3n+4) {
        color:red;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

Rezultat

Interpretacja selektora :nth-last-of-type()