CSS да спецификлик қоидалари

Олдинги мисолда ҳар икки селектор бир хил эди ва бир хил устуворликка эга эди. Демак, эн пастда ёзилган хусусият ғолиб келарди.

Саҳифанинг бир элементига бир нечта селектор мос келадиган вазиятлар ҳам бўлади. Бундай ҳолда, қарама-қарши келувчи хусусиятларда янда специфик, яъни аникроқ селектор ғолиб келади. Келинг, спецификлик қоидаларини кўриб чиқайлик.

Биринчи қоида

Класс ҳамиша тег селекторини енгади:

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

cssp {
  color: red;
}
.text {
  color: green; /* шу ранг қўлланилади */
}

Результат:

Иккинчи қоида

Идентификатор ҳамиша классни енгади:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* шу ранг қўлланилади */
}

Результат:

Учинчи қоида

Тенг шароитларда, қисмлари кўпроқ бўлган селектор ёнгади. Масалан, агар бизда иккита тег селектори бўлса, у ҳолда теглари кўпроқ бўлгани ёнгади:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* шу ранг қўлланилади */
}

Результат:

Агар иккита класс селектори бўлса, у ҳолда ичида кўрсатилган класслар кўпроқ бўлгани ёнгади (агар уларда тег селекторлари бўлса, улар таъсир қилмайди):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* шу ранг қўлланилади */
}

Результат: