Специфічність (specificity) селекторів у CSS — це правило, яке визначає, який саме стиль буде застосовано до елемента, якщо на нього діє кілька різних селекторів.
| Селектор | Приклад | Специфічність | Коментар |
|---|---|---|---|
| Універсальний селектор | * |
0-0-0-0 |
Найнижча специфічність |
| Селектор елемента (тега) | div, h1, p |
0-0-0-1 |
Низька специфічність |
| Селектор класу | .menu, .active |
0-0-1-0 |
Середня специфічність |
| Селектор атрибута | [type="text"] |
0-0-1-0 |
Як клас |
| Селектор псевдокласу | :hover, :nth-child() |
0-0-1-0 |
Як клас |
| Селектор ID | #header, #main |
0-1-0-0 |
Висока специфічність |
| Інлайн-стиль | style="..." |
1-0-0-0 |
Дуже висока специфічність |
| !important | — | — | Перебиває все, але краще уникати зловживання |
| Тип | Опис | | —————– | ——————————————————————————- | | Псевдоклас | Додає стиль елементу в залежності від його стану. | | Псевдоелемент | Дозволяє стилізувати частину елементу |
| Псевдоклас | Опис |
|---|---|
:hover |
Коли миша наводиться на елемент |
:active |
Коли елемент активний (натиснутий) |
:focus |
Коли елемент у фокусі (наприклад, інпут) |
:visited |
Стилізує відвідані посилання |
:first-child |
Перший дочірній елемент |
:last-child |
Останній дочірній елемент |
:checked |
Вибрані чекбокси або радіо |
:disabled |
Вимкнені елементи форми |
:root |
Головний елемент документа (наприклад, html) |
:required |
Поля, обов’язкові для заповнення |
| Псевдоелемент | Опис |
|---|---|
::before |
Додає віртуальний елемент перед вмістом |
::after |
Додає віртуальний елемент після вмісту |
::first-line |
Стилізує перший рядок тексту елемента |
::first-letter |
Стилізує першу літеру тексту |
Static: Значення за замовчуванням. Елемент не можна переміщувати.relative: елемент можна зміщувати за допомогою top, left, right, bottom відносно поточного розташування на сторінці. Наприклад даємо top:20px і він опуститься внизabsolute - можна переміщувати за допомогою top, left, right, bottom. Фактично вибиває елемент із основного потоку документа. Позиціонується відносно найближчого не static батьківського елемента.
fixed - позиціонується відносно вікна браузера. НЕ РУХАЄТЬСЯ ПРИ СКРОЛЛІ.Проблема - якщо два елементи мають вертикальний margin, береться тільки найбільший margin — вони не сумуються, а зливаються.
Змінює формулу розрахунку фактичної ширини та висоти об’єкта
border, padding - частина заданої ширини і висоти| Одиниця | Тип | Опис |
|---|---|---|
px |
Абсолютна | Пікселі. Фіксований розмір. |
% |
Відносна | Відсоток від батьківського елемента. |
vw |
Відносна | 1% ширини вікна (viewport). |
vh |
Відносна | 1% висоти вікна (viewport). |