Selectorii de descendenți
O pagină web poate avea o structură complexă, unde anumite elemente conțin alte elemente în interiorul lor. Elementele încastrate pot fi numite descendenți, iar containerul acestor elemente - părinte.
De exemplu, să presupunem că elementul body de pe o pagină web conține următorul conținut:
<body>
<h2>Titlu</h2>
<div>
<p>Text</p>
</div>
</body>În interiorul elementului body sunt definite trei elemente încastrate: h2, div, p. Toate aceste elemente sunt descendenții elementului body.
Și în interiorul elementului div este definit un singur element încastrat - p, deci elementul div are doar un descendent.
Folosind selectori speciali, putem stiliza elementele încastrate sau descendenții în cadrul unor elemente strict definite. De exemplu, pe pagina noastră pot exista paragrafe în interiorul blocului de conținut principal și în interiorul blocului footer. Dar pentru paragrafele din blocul de conținut principal am dori să stabilim un anumit font, iar pentru paragrafele din footer altul.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectori CSS</title>
<style>
#main p{
font-size: 16px;
}
#footer p{
font-size: 13px;
}
</style>
</head>
<body>
<div id="main">
<p>Primul paragraf</p>
<p>Al doilea paragraf</p>
</div>
<div id="footer">
<p>Textul footerului</p>
</div>
</body>
</html>
Pentru a aplica un stil unui element încastrat, selectorul trebuie să conțină mai întâi elementul părinte și apoi elementul încastrat:
#main p{
font-size: 16px;
}Adică acest stil va fi aplicat doar elementelor p care se află în interiorul elementului cu identificatorul main.
Să examinăm un alt exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectori CSS</title>
<style>
li .redLink{
color: red;
}
</style>
</head>
<body>
<ul>
<li>Samsung: <a class="redLink">Galaxy S7 Edge</a></li>
<li>Apple: <a>iPhone SE</a></li>
<li>LG: <a class="redLink">LG G5</a></li>
<li>Microsoft: <a>Lumia 650</a></li>
</ul>
</body>
</html>Aici, stilul este aplicat elementelor cu clasa "redLink" care se află în interiorul elementului <li>. Și, în consecință, browserul va colora aceste elemente în roșu:
Dar observați spațiul: li .redLink. Acest spațiu are o mare importanță și indică faptul că elementele cu clasa redLink trebuie să fie descendenții elementului <li>
Dacă eliminăm spațiul:
li.redLink{
color: red;
}sensul selectorului se schimbă. Acum se presupune că stilul este aplicat elementelor <li> care au clasa redLink. De exemplu, următorului element:
<li class="redLink">Microsoft: <a>Lumia 650</a></li>Dar nu și elementului:
<li>LG: <a class="redLink">LG G5</a></li>