CSS selektor pratećeg elementa

Hajde da ponovo prvo predstavimo način na koji uobičajeno funkcionišu selektori. Dakle, možemo reći da se definisani selektori selektor1 i selektor2, odnose na HTML elemente s1 i s2.

selektor1 { [lista deklaracija] } selektor2 { [lista deklaracija] } ... <s2>...</s2> <s1>...</s1> <s2>...</s2> <x> <s2>...</s2> </x> <s2>...</s2>

Vidimo da ovako definisani stilovi utiču na svaki elemenat na koji se njihovi selektori odnose. Da pogledamo kako se definiše odnos između selektora kada želimo da utičemo na HTML element koji dolazi posle nekog drugog elementa.

Opšte-prateći element

Odnosi se na element koji se u HTML hijerarhiji nalazi posle nekog zadatog vodećeg elementa i to na istom nivou (oba pripadaju istom nadređenom elementu).

Navodi se kao PRVI ~ DRUGI, gde PRVI označava selektor zadatog vodećeg elementa, a DRUGI selektor pratećeg elementa.

selektor1 ~ selektor2 { [lista deklaracija] } ... <s2>...</s2> <s1>...</s1> <s2>...</s2> <x> <s2>...</s2> </x> <s2>...</s2>

Primer za opšte-prateći elemenat

Ovde ćemo zacrveneti svaki span elemenat koji dolazi posle div bloka klase "kont".


  <style>
    div.kont ~ span {
      color: red;
    }
  </style>
  
  ...

  <span>Span elemenat pre bloka - NE.</span>
  <div class="kont">
    <span>Span elemenat unutar bloka - NE.</span>
  </div>
  <span>Span elemenat odmah posle bloka - DA.</span>
  <p>
    <span>Span elemenat unutar drugog elementa - NE.</span>
  </p>
  <span>Span elemenat negde kasnije posle bloka - DA.</span>

Neposredno-prateći element

Odnosi se na element koji se u HTML hijerarhiji nalazi odmah posle nekog zadatog vodećeg elementa (na istom nivou - oba pripadaju istom nadređenom elementu).

Navodi se kao PRVI + DRUGI, gde PRVI označava selektor zadatog vodećeg elementa, a DRUGI selektor pratećeg elementa.

selektor1 + selektor2 { [lista deklaracija] } ... <s2>...</s2> <s1>...</s1> <s2>...</s2> <x> <s2>...</s2> </x> <s2>...</s2>

Primer za neposredno-prateći elemenat

Ovde ćemo zacrveneti span elemenat ali samo ako dolazi odmah posle div bloka klase "kont".


  <style>
    div.kont + span {
      color: red;
    }
  </style>
  
  ...

  <span>Span elemenat pre bloka - NE.</span>
  <div class="kont">
    <span>Span elemenat unutar bloka - NE.</span>
  </div>
  <span>Span elemenat odmah posle bloka - DA.</span>
  <p>
    <span>Span elemenat unutar drugog elementa - NE.</span>
  </p>
  <span>Span elemenat negde kasnije posle bloka - NE.</span>

Pogledajte primer koji obuhvata kompleksne selektore ovog tipa:

css-sel-prateci-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.