Autor publikacji: Virtual Patriot - Administrator

Selektor braci

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - subsequent sibling combinator (LV3)

Przeznaczenie selektora braci

      selektor ~ selektor { ... }

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

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

Informacje techniczne o selektorze braci

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

Przykładowa reguła CSS, selektor braci

div ~ p {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      div ~ p { color:red; }

div ~ p: do każdego elementu p, który jest jednym z elementów braci 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 ~ p {
        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 "p", który byłby jednym z elementów braci elementu "div"
    </div>

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

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

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

    <div>
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p", który byłby jednym z elementów braci elementu "div"
    </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 "p", który byłby jednym z elementów braci elementu "div"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem bratem elementu "div", lecz jest elementem dzieckiem elementu "div"

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

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

Interpretacja selektora braci

: tak
: tak
: tak
: tak
: tak
: tak

Zobacz więcej informacji o interpretacji selektora braci.