WEBnSTUDY.com
CSS

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.

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) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.