Ostatnio edytowany:

Selektor potomka

Autor: Virtual Patriot

Przeznaczenie selektora potomka

      selektor selektor { ... }
    

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

Selektor potomka tworzymy co najmniej za pomocą dwóch selektorów CSS, pomiędzy którymi należy umieścić przynajmniej jeden biały znak (zazwyczaj znak spacji).

Dodatkowe techniczne informacje o selektorze potomka

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor potomka

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 potomkiem 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 potomkiem elementu "div"
    </div>

    <div>
      <p>
        <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 "p", który z kolei jest elementem dzieckiem elementu "div", dlatego ten element "span" jest również elementem potomkiem wspomnianego 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 potomkiem 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", dlatego ten element "span" jest również elementem potomkiem wspomnianego 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 potomkiem 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 "p", który z kolei jest elementem dzieckiem elementu "div", dlatego ten element "span" jest również elementem potomkiem wspomnianego 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 potomkiem 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", dlatego ten element "span" jest również elementem potomkiem wspomnianego elementu "div"

Interpretacja selektora potomka

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak