Selectorul de descendenți în CSS
Să presupunem că avem o listă ul și o listă
ol:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Haideți să colorăm tagurile li din aceste liste
în culoarea roșie:
li {
color: red;
}
Să presupunem acum că vrem să colorăm tagurile li
listei ul în roșu, iar tagurile li
listei ol - în verde.
În acest caz, ne va ajuta selectorul de descendenți.
Acesta permite selectarea tagurilor în funcție de părintele lor.
Pentru aceasta, trebuie să specificați selectorul părintelui,
iar după spațiu - selectorul descendentului. În cazul nostru
selectorul ul li va selecta toate
tagurile li din lista ul, iar selectorul
ol li - va selecta toate tagurile li
din lista ol. Să le colorăm
în culorile necesare:
ul li {
color: red;
}
ol li {
color: green;
}
Selectorul de descendenți nu trebuie neapărat să fie format
din doi selectorii de tag-uri - pot fi
orice număr de ei, scriși prin spațiu.
În următorul cod, de exemplu, sunt selectate toate
tagurile i, care se află în interiorul tagului li,
care la rândul lor se află în interiorul tagului
ul:
ul li i {
color: red;
}
Este dat următorul cod:
<ul>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
<li>text <i>italic</i></li>
</ul>
<p>
paragraf text <i>italic</i>
</p>
<p>
paragraf text <i>italic</i>
</p>
Colorați în roșu italic-ul din tagurile
ul, iar în verde - italic-ul din tagurile
p.
Este dat următorul cod:
<p>
paragraf text <b><i>bold italic</i></b>
</p>
<p>
paragraf text <i>italic</i>
</p>
Colorați în roșu italic-ul, care se află
în interiorul tagului b, care la rândul său
se află în interiorul tagului p.