Pana acum am vorbit de trei metode prin care putem selecta elemente in HTML pentru a le stiliza cu CSS:

  • folosind numele tag-ului
  • folosind atributul class
  • sau folosind atributul id

Combinand aceste metode putem creea cativa selectori mai avansati prin care putem ajunge la anumite elemente care se afla in interiorul altor elemente.

Acest gen de selectori se numesc: descendenti, pentru ca se refera la copii, sau descendentii unui alt element.

De exemplu, exista un selector prin care ne putem adresa tuturor copiilor unui element, de un anumit fel.

div span {
    color: purple;
}

Asadar, avem numele unui tag un spatiu si apoi numele unui tag copil. Regula CSS va face culoarea mov.

Daca folosim urmatoarea structura a paginii:

<h1>Titlul paginii</h1>
<p>Subtitlul paginii care de fapt este un paragraf foarte scurt</p>
<div>
    <p>Primul paragraf din pagina.</p>
    <p>Al doilea paragraf din pagina ce cuprinde cateva <span>cuvinte speciale</span> ce vor fi stilizate altfel.
    </p>
    <span>Ultimul paragraf ce contine cateva cuvinte.</span>
</div>

Folosind selectorul div span ne vom adresa tuturor elementelor <span></span> care se afla in elementul <div></div>. Asta include cel ce se afla in interiorul celui de-al doilea paragraf, dar si ultimul <span></span> din element.