CSS селектори використовуються щоб вибрати вміст, який потрібно стилізувати . Селектори є частиною набору правил CSS. Селектори CSS вибирають елементи HTML відповідно до їх ідентифікатора, класу, типу, атрибута тощо.
У CSS є кілька різних типів селекторів.
- Селектор елементів CSS
- Селектор ідентифікатора CSS
- Селектор класів CSS
- Універсальний селектор CSS
- Селектор груп CSS
1) Селектор елементів CSS
Селектор елементів вибирає елемент HTML за назвою.
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> Перевірте зараз Вихід:
Цей стиль буде застосовано до кожного абзацу.
Я також!
І я!
2) Селектор ідентифікатора CSS
Селектор id вибирає атрибут id елемента HTML, щоб вибрати певний елемент. Ідентифікатор завжди унікальний на сторінці, тому його вибирають для вибору єдиного унікального елемента.
Він записується за допомогою символу решетки (#), після якого йде ідентифікатор елемента.
Давайте візьмемо приклад з ідентифікатором 'para1'.
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> Перевірте зараз Вихід:
Привіт Javatpoint.com
Цей абзац не вплине.
3) Селектор класів CSS
Селектор класу вибирає елементи HTML із певним атрибутом класу. Використовується з крапкою. (символ крапки), після чого йде назва класу.
Примітка. Назва класу не повинна починатися з числа.
Візьмемо приклад із класом «центр».
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> Перевірте зараз Вихід:
Привіт Javatpoint.com
Привіт Javatpoint.com (меншим шрифтом)
Це абзац.