CSS Селектори
CSS-селектор вибирає HTML-елементи, до яких потрібно додати стиль.
CSS Селектори
CSS селектори використовуються для "пошуку" (або вибору) HTML-елементів, які ви хочете стилізувати.
Можна розділити CSS селектори на п’ять категорій:
- Прості селектори (вибір елементів на основі імені, ідентифікатору, класу)
- Комбінаторні селектори (вибір елементів на основі визначених відношень між ними)
- Селектори псевдокласів (вибір елементів на основі визначеного стану)
- Селектори псевдоелементів (вибір і стилізація частини елемента)
- Селектори атрибутів (вибір елементів на основі атрибуту або значення атрибуту)
На цій сторінці пояснюються прості селектори CSS.
CSS селектор елемента
Селектор елементів обирає HTML елементи на основі імені елемента.
Приклад
Тут всі елементи <p> на сторінці будуть вирівняні по центру з червоним кольором тексту:
p {
text-align: center;
color: red;
}
Спробуйте самі »
CSS селектор id
Селектор id використовує атрибут id HTML елемента для вибору визначеного елемента.
Ідентифікатор (id) елементу є унікальним на сторінці, тому селектор id використовується для вибору одного унікального елемента!
Щоб обрати елемент з визначеним ідентифікатором, напишіть символ хешу (#), а потім id елемента.
Приклад
Наведене нижче правило CSS буде застосовано до елементу HTML з id="para1":
#para1 {
text-align: center;
color: red;
}
Спробуйте самі »
Примітка: Ім’я Id не може починатися з цифри!
CSS селектор class
Селектор class обирає HTML елементи з визначеним атрибутом класу.
Щоб обрати елементи з визначеним класом, введіть символ крапки (.), а потім ім’я класу.
Приклад
В цьому прикладі всі HTML елементи з class="center" будуть червоними та вирівняні по центру:
.center {
text-align: center;
color: red;
}
Спробуйте самі »
Ви також можете вказати, що клас має зачіпати лише визначені HTML елементи.
Приклад
В цьому прикладі лише елементи <p> з class="center" будуть вирівняні по центру:
p.center {
text-align: center;
color: red;
}
Спробуйте самі »
HTML елементи також можуть посилатись на кілька класів.
Приклад
В цьому прикладі елемент <p> буде стилізовано у відповідності з class="center" та class="large":
<p class="center large">Цей параграф реферер для двох класів.</p>
Спробуйте самі »
Примітка: Ім’я класу не може починатися з цифри!
Універсальний CSS селектор
Універсальний селектор (*) виділяє всі елементи HTML на сторінці.
Приклад
Наведене нижче правило CSS впливає на кожен HTML елемент на сторінці:
* {
text-align: center;
color: blue;
}
Спробуйте самі »
CSS Селектор групування
Селектор групування обирає всі HTML елементи з однаковими визначеннями стилю.
Подивіться наступний код CSS (елементи h1, h2 та p мають однакові визначення стилю):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Буде краще згрупувати селектори, щоб мінімізувати код.
Щоб згрупувати селектори, розділяйте кожен селектор комою.
Приклад
В цьому прикладі ми згрупували селектори із коду вище:
h1, h2, p {
text-align: center;
color: red;
}
Спробуйте самі »
Всі прості CSS селектори
| Селектор | Приклад | Опис прикладу |
|---|---|---|
| .class | .intro | Обирає всі елементи з class="intro" |
| #id | #firstname | Обирає елемент з id="firstname" |
| * | * | Обирає всі елементи на сторінці |
| element | p | Обирає всі елементи <p> |
| element,element,.. | div, p | Обирає всі елементи <div> та всі елементи <p> |
CSS — Прості селектори — W3Schools Відео
Відео про прості селектори, як-от елемент, Id і class в CSS.
Частина серії відеоуроків для навчання CSS для початківців!
