Ostatnio edytowany:

Selektor sąsiadującego brata

Autor: Virtual Patriot

Przeznaczenie selektora sąsiadującego brata

      selektor + selektor { ... }
    

Selektor sąsiadującego brata odszukuje każdy element HTML, który jest sąsiadującym elementem bratem elementu HTML odszukanego przez selektor, który podaliśmy przed znakiem + danej reguły CSS.

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

Dodatkowe techniczne informacje o selektorze sąsiadującego brata

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor sąsiadującego brata

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 sąsiadującym elementem bratem 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 sąsiadującym elementem bratem 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 sąsiadującym elementem bratem elementu "div", lecz jest pierwszym 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 sąsiadującym elementem bratem elementu "div"
    </p>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest sąsiadującym elementem bratem elementu "div", lecz ten element HTML jest elementem "p", który jest drugim elementem bratem drugiego elementu "div" oraz trzecim elementem bratem pierwszego 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 sąsiadującym elementem bratem 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 sąsiadującym elementem bratem elementu "div"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest sąsiadującym elementem bratem elementu "div", lecz jest pierwszym 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 sąsiadującym elementem bratem elementu "div"

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest sąsiadującym elementem bratem elementu "div", lecz ten element HTML jest elementem "p", który jest drugim elementem bratem drugiego elementu "div" oraz trzecim elementem bratem pierwszego 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 sąsiadującym elementem bratem elementu "div"

Interpretacja selektora sąsiadującego brata

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak