Що таке специфіка селекторів CSS і як вона працює?

Специфічність – це спосіб, за допомогою якого браузери визначають, які значення властивостей CSS найбільше відповідають елементу і, отже, будуть застосовані. Специфічність заснована на правилах відповідності, що складаються з селекторів CSS різних типів.

Специфіка — це алгоритм, завдяки якому браузер визначає, які саме стилі з набору застосувати до елемента. У обчисленнях беруть участь CSS-селектори. Якщо одному й тому елементу підходить відразу кілька CSS-правил з різними селекторами, то браузер застосовує ті стилі, вага селектора яких більше.

Що таке селектори? Ви вже зустрічалися з селекторами. Це вирази, які говорять браузеру, до якого елементу HTML потрібно застосувати ті чи інші властивості CSS, що визначені всередині блоку оголошення стилю.

Розрізняють такі типи селекторів CSS:

  • 1) універсальні селектори,
  • 2) селектори за назвою тега,
  • 3) селектори за класом,
  • 4) селектори по id,
  • 5) селектори за атрибутом,
  • 6) селектори нащадків, чи контекстні селектори,
  • 7) селектори дочірні (тільки перші),