Autor publikacji: Virtual Patriot - Administrator

:first-of-type

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - the :first-of-type pseudo-class (LV3)

Przeznaczenie selektora `:first-of-type`

      :first-of-type { ... }

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

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

Informacje techniczne o selektorze `:first-of-type`

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

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

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

Wyjaśnienie przykładowej reguły CSS

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

p:first-of-type: do każdego elementu p, który jest pierwszym 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:first-of-type {
        color:red;
      }
    </style>
  </head>

  <body>

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

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

    <hr>

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

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

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

  </body>
</html>

Rezultat

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

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

Interpretacja selektora `:first-of-type`

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

Zobacz więcej informacji o interpretacji selektora :first-of-type.