CSS-da avlod selektorlarining ustunligi

Oldingi barcha darslarda barcha selektorlar elementning o'zini ushlashi kerak edi. Bunday bo'lishi mumkinki, bir selektor elementni ushlaydi, ikkinchisi esa ushbu elementning ota-onasini ushlaydi.

Siz allaqachon bilasizki, agar ota-onga, masalan, rang belgilangan bo'lsa, bu rang avlod tomonidan meros qolinadi. Ammo, agar avlodga ham rang belgilangan bo'lsa, unda selektor avlod ota-ona selektoriga qaraganda katta ustunlikka ega bo'ladi.

Bu shuni anglatadiki, avlod tegi selektori g'alaba qozonadi ota-ona sinfini:

html<div class="block">
  <p>text</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* shu rang qo'llaniladi */
}

Результат:

Avlod tegi selektori ham g'alaba qozonadi identifikatorni ota-ona:

html<div id="block">
  <p class="text">text</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* shu rang qo'llaniladi */
}

Результат: