CSS selektor podređenog elementa
Da sumiramo ono što znamo do sada - CSS formatiranja možemo podvesti pod neki selektor. Selektor predstavlja pravilo koje "kaže" na koje HTML elemente se formatiranje odnosi.
Dakle, možemo reći da se definisani selektori selektor1 i selektor2, odnose na HTML elemente s1 i s2. Ovo je samo "teorijski", a u praksi selekotri mogu biti HTML selektori, selektori klase, id selektori itd. dok HTML elementi takođe mogu biti bilo koji.
selektor1 {
[lista deklaracija]
}
selektor2 {
[lista deklaracija]
}
...
<s1>
<x>...</x>
<s2>...</s2>
<x>
<s2>...</s2>
</x>
</s1>
<s2>...</s2>
Tako vidimo da ovako definisani stilovi utiču na svaki elemenat na koji se njihovi selektori odnose. Sada možemo da pogledamo kako se definiše odnos između selektora kada želimo da utičemo na HTML element koji se nalazi unutar nekog drugog elementa.
Podređeni element
Ovi selektori nastaju kao kombinacija selektora. Na ovaj način se definišu stilovi za elemente zavisno od njihovog međusobnog odnosa u HTML dokumentu.
Odnosi se na element koji se nalazi bilo gde unutar nadređenog (kontejnerskog) elementa.
Navodi se kao NAD POD (obavezno sa razmakom), gde NAD označava selektor nadređenog (kontejnerskog) elementa, a POD selektor podređenog (unutrašnjeg) elementa.
selektor1 selektor2 {
[lista deklaracija]
}
...
<s1>
<x>...</x>
<s2>...</s2>
<x>
<s2>...</s2>
</x>
</s1>
<s2>...</s2>
Primer za podređeni elemenat
Da ne bi sve bilo samo teorijski, hajde sada da napravimo jedan konkretan primer. Definisaćemo da span elemenat unutar div bloka klase "kont" ima tekst crvene boje.
<style>
div.kont span {
color: red;
}
</style>
...
<div class="kont">
<span>Span elemenat neposredno unutar bloka - DA.</span>
<p>
<span>Span elemenat indirektno unutar bloka - DA.</span>
</p>
</div>
<span>Span elemenat van bloka - NE.</span>
Da biste proverili na koji način se selektor primenjuje na dati HTML, pogledajte priloženi primer na dnu stranice.
Neposredno-podređeni element
Odnosi se na element koji se nalazi unutar nadređenog (kontejnerskog) elementa, ali direktno - ne unutar još nekog elementa.
Navodi se kao NAD > POD, gde NAD označava selektor nadređenog elementa, a POD selektor podređenog elementa.
selektor1 > selektor2 {
[lista deklaracija]
}
...
<s1>
<x>...</x>
<s2>...</s2>
<x>
<s2>...</s2>
</x>
</s1>
<s2>...</s2>
Primer za direktno podređeni elemenat
Ovde imamo sličnu situaciju, s tim što definišemo da samo direktno podređen span elemenat unutar div bloka klase "kont" ima tekst crvene boje.
<style>
div.kont > span {
color: red;
}
</style>
...
<div class="kont">
<span>Span elemenat neposredno unutar bloka - DA.</span>
<p>
<span>Span elemenat indirektno unutar bloka - NE.</span>
</p>
</div>
<span>Span elemenat van bloka - NE.</span>
U živom primeru možete primetiti razliku između ova dva načina kombinovanja selektora.