Ostatnio edytowany:

Selektor dziecka

Autor: Virtual Patriot

Przeznaczenie selektora dziecka

      selektor > selektor { ... }
    

Selektor dziecka odszukuje każdy element HTML, który jest jednym z elementów dzieci elementu HTML odszukanego przez selektor, który podaliśmy przed znakiem > danej reguły CSS.

Selektor dziecka tworzymy co najmniej za pomocą dwóch selektorów CSS, pomiędzy którymi należy umieścić jeden znak > (znak większości) oraz ewentualnie inne białe znaki.

Dodatkowe techniczne informacje o selektorze dziecka

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor dziecka

div > span {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      div > span { color:red; }
    
div > span

Do każdego elementu span, który jest elementem dzieckiem elementu div

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>
      div > span {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"
    </div>

    <div>
      <p>
        <span>
          tekst znajdujący się w zawartości tego elementu "span" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "p", a nie elementu "div"
        </span>
      </p>
    </div>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"
    </p>

    <div>
      <span>
        tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"
      </span>

      <hr>

      <span>
        tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"
      </span>
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"

tekst znajdujący się w zawartości tego elementu "span" nie jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "p", a nie elementu "div"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "span", który byłby elementem dzieckiem elementu "div"

tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"
tekst znajdujący się w zawartości tego elementu "span" jest koloru czerwonego, ponieważ ten element HTML jest elementem "span", który jest elementem dzieckiem elementu "div"

Interpretacja selektora dziecka

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak