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: