Ostatnio edytowany:

:first-child

Autor: Virtual Patriot

Przeznaczenie selektora :first-child

      :first-child { ... }
    

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

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

Dodatkowe techniczne informacje o selektorze :first-child

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :first-child

p:first-child {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:first-child { color:red; }
    
p:first-child

Do każdego elementu p, który jest pierwszym 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:first-child {
        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 dzieckiem swojego 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 dzieckiem swojego elementu rodzica, lecz jest drugim
      </p>
    </div>

    <hr>

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

      <p>
        tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest pierwszym elementem dzieckiem swojego 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 dzieckiem swojego elementu rodzica

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


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

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

Interpretacja selektora :first-child

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak