НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Специфічність


Що таке специфічність?

Визначення

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

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

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

Універсальний селектор (*) має низьку специфічність, в той час, як селектори ID дуже специфічні!

Примітка: Специфічність - це часта причина, із-за якої ваші правила CSS не застосовуються до деяких елементів, хоча ви вважаєте, що вони мають застосовуватись.


Ієрархія специфічності

Кожен селектор має своє місце в ієрархії специфічності. Є чотири категорії, які визначають рівень специфічності селектора:

Вбудовані стилі - Вбудований стиль прикріплюється безпосередньо до стилізованого елементу. Приклад: <h1 style="color: #fff;">.

IDs - ID - це унікальний ідентифікатор для елементів сторінки, наприклад #navbar.

Класи, атрибути та псевдокласи - В цю категорію входять .classes, [attributes] і псевдокласи, такі як: hover, :focus і т.д.

Елементи та псевдоелементи - В цю категорію входять імена елементів та псевдоелементи, такі як h1, div, :before та :after.


Як розрахувати специфічність?

Запам’ятайте, як розрахувати специфічність!

Почніть з 0, додайте 1000 для атрибута стиля, додайте 100 для кожного ідентифікатора, додайте 10 для кожного атрибута, класу чи псевдокласу, додайте 1 для кожного імені елемента або псевдоелемента.

Розглянемо ці три фрагменти коду:

Приклад

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #fff">Heading</h1></div>

Специфічність A дорівнює 1 (один елемент)
Специфічність B дорівнює 101 (одне посилання ID та один елемент)
Специфічність C дорівнює 1000 (вбудований стиль)

Оскільки 1 < 101 < 1000 третє правило (C) має більш високий рівень специфічності і тому буде застосовуватись.


Правила специфічності

Рівна специфічність: враховується останнє правило - якщо одні і те ж правило двічі записано в зовнішню таблицю стилів, то нижнє правило в таблиці стилів ближче до елементу, який потрібно стилізувати, і тому буде застосовуватись:

Приклад

h1 {background-color: yellow;}
h1 {background-color: red;}
Спробуйте самі »

Останнє правило застосовується завжди.


Селектори ідентифікаторів мають більш високу специфічність, аніж селектори атрибутів. Зверніть увагу на наступні три рядки коду:

Приклад

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Спробуйте самі »

Перше правило більш конкретне, ніж два інших, і буде застосовуватись.


Контекстні селектори більш специфічні, ніж селектор одного елемента - вбудована таблиця стилів ближче до елемента, який необхідно стилізувати. Як в наступній ситуації:

Приклад

Із зовнішнього CSS файлу:
#content h1 {background-color: red;}

В HTML файлі:
<style>
#content h1 {
  background-color: yellow;
}
</style>

Останнє правило буде застосовуватись.


Селектор класу переважає будь-яку кількість селекторів елементів - селектор класу, такий як .intro, переважає h1, p, div і т.д.:

Приклад

.intro {background-color: yellow;}
h1 {background-color: red;}
Спробуйте самі »

Універсальний селектор та успадковані значення мають специфічність 0 - *, body * та подібні мають нульову специфічність. Успадковані значення також мають специфічність 0.