Autor publikacji: Virtual Patriot - Administrator

:last-child

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the :last-child pseudo-class (LV3)

Przeznaczenie selektora `:last-child`

      :last-child { ... }

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

Cechy elementu HTML spełniają zasadę pseudoklasy :last-child, gdy w danym momencie dany element HTML jest ostatnim elementem dzieckiem swojego elementu rodzica.

Informacje techniczne o selektorze `:last-child`

ograniczenie - elementy HTML: brak
ograniczenie - właściwości CSS: brak

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

p:last-child {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:last-child { color:red; }

p:last-child: do każdego elementu p, który jest ostatnim elementem dzieckiem swojego 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>Darmowy Kurs CSS</title>

    <style>
      p:last-child {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      <p>
        tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem dzieckiem swojego elementu rodzica, lecz jest pierwszym
      </p>

      <p>
        tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem dzieckiem swojego elementu rodzica
      </p>
    </div>

    <hr>

    <div>
      <p>
        tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem dzieckiem swojego elementu rodzica, lecz jest pierwszym
      </p>

      <div>
        tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML jest ostatnim elementem dzieckiem swojego elementu rodzica, ponieważ ten element HTML nie jest elementem "p"
      </div>
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem dzieckiem swojego elementu rodzica, lecz jest pierwszym

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem dzieckiem swojego elementu rodzica

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem dzieckiem swojego elementu rodzica, lecz jest pierwszym

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, mimo że ten element HTML jest ostatnim elementem dzieckiem swojego elementu rodzica, ponieważ ten element HTML nie jest elementem "p"

Interpretacja selektora `:last-child`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji selektora :last-child.