Ostatnio edytowany:

:last-of-type

Autor: Virtual Patriot

Przeznaczenie selektora :last-of-type

      :last-of-type { ... }
    

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

Cechy elementu HTML spełniają zasadę pseudoklasy :last-of-type, gdy w danym momencie dany element HTML jest ostatnim elementem swojego typu względem ewentualnych pozostałych elementów dzieci należących do wspólnego elementu rodzica.

Dodatkowe techniczne informacje o selektorze :last-of-type

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

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

p:last-of-type {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:last-of-type { color:red; }
    
p:last-of-type

Do każdego elementu p, który jest ostatnim elementem typu p względem pozostałych elementów dzieci 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>Darmowy Kurs CSS</title>

    <style>
      p:last-of-type {
        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 typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch
      </p>

      <p>
        tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego 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 typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch
      </p>

      <p>
        tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
      </p>

      <div>
        tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest ostatnim elementem typu "div"
      </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 typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica


tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element "p" jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest ostatnim elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest ostatnim elementem typu "div"

Interpretacja selektora :last-of-type

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji selektora .