CSS селектори
CSS селектори — це інструменти для вибору та стилізації HTML елементів. Вони дозволяють застосовувати стилі до конкретних елементів на основі їх тегів, класів, ID та інших характеристик.
Типи CSS селекторів
Основні селектори
Tag Selector
Class Selector
ID Selector
Universal Selector
Group Selector
Комбінаторні селектори
- Селектор нащадків (
E > F) — вибирає лише прямих нащадків.
Приклад: div > p вибирає абзаци, які є прямими дітьми div.
- Селектор сусідніх елементів (
E + F) — вибирає елемент, що безпосередньо слідує за вказаним.
Приклад: h1 + p вибирає перший абзац, що йде відразу після заголовка h1.
- Селектор загальних сусідів (
E ~ F) — вибирає всі елементи, що йдуть після вказаного.
Приклад: h1 ~ p вибирає всі абзаци, що йдуть після h1.
Селектори атрибутів
[attr]
[attr=value]
[attr*=value]
[attr^=value]
[attr$=value]
Приклади використання селекторів
css
/* Tag selector */
p {
color: red;
}
/* Class selector */
.button {
background-color: blue;
}
/* ID selector */
#header {
font-size: 24px;
}
/* Attribute selector */
input[type="text"] {
border: 1px solid #ccc;
}Корисний ресурс
- flukeout.github.io - тренажер CSS селекторів, який допоможе вам зрозуміти CSS селектори.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.