Ostatnio edytowany:

Selektor braci

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje 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 "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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji .