div є одним з основних елементів верстки CSS. Він використовується для створення блоків різних розмірів та форм, які можуть містити інші елементи HTML. Для правильної стилізації та маніпуляції з div блоками в CSS потрібно знати як звернутися до них за допомогою селекторів.
Селектори div надають можливість удосконалити структуру та зовнішній вигляд веб-сторінки. Вони дозволяють вибирати конкретні div елементи і застосовувати різні властивості CSS. Селектори можуть бути дуже гнучкими та можуть вибирати елементи з певними атрибутами, класами або id.
Ідентифікатори та класи часто використовуються в CSS для вибору конкретних блоків div. Ідентифікатори є символом решітки (#), а класи – точкою (.). Використання ідентифікаторів дозволяє вибрати конкретний div елемент на сторінці, який має унікальний id. Класи, з іншого боку, дозволяють вибрати всі div елементи, які мають певний клас. Здійснюючи вибірку за допомогою ідентифікаторів та класів, можна створювати точкові стилі для кожного блоку на веб-сторінці.
| Селектор | Опис |
|---|---|
| .class | Вибирає всі елементи із зазначеним класом |
| #id | Вибирає елемент із зазначеним ідентифікатором (id) |
| element | Вибирає всі елементи вказаного типу |
| element, element | Вибирає декілька елементів різних типів |
| element.class | Вибирає елементи зазначеного типу та класу |
| element.class1.class2 | Вибирає елементи зазначеного типу та обох класів |
| element#id | Вибирає елемент зазначеного типу та ідентифікатора |
| .class1.class2 | Вибирає елементи з обома вказаними класами |
| .class1 .class2 | Вибирає елементи із зазначеним класом усередині елементів із зазначеним класом |
| .class1 > .class2 | Вибирає елементи із зазначеним класом, які є прямими нащадками елементів із зазначеним класом |
| .class1 + .class2 | Вибирає елементи із зазначеним класом, які йдуть безпосередньо після елементів із зазначеним класом |
| .class1 ~ .class2 | Вибирає елементи із зазначеним класом, які йдуть після елементів із зазначеним класом |
| .class:first-child | Вибирає перший елемент із зазначеним класом |
| .class:last-child | Вибирає останній елемент із зазначеним класом |
| :not(.class) | Вибирає всі елементи, які не мають зазначеного класу |
| :even | Вибирає елементи з парним номером |
| :odd | Вибирає елементи з непарним порядковим номером |
| :nth-child(n) | Вибирає елементи, що знаходяться на позиції n (починаючи з 1) усередині батьківського елемента |
Звернутися до першого елемента всередині батька можна за допомогою псевдокласу: first-child . Колір першого параграфа зміниться на червоний.
У CSS існує два селектори для вибору елемента, який лежить поряд з іншим елементом:
Кожному тегу HTML відповідає так званий селектор CSS. Наприклад, тегу <p>відповідає CSS селектор p, за допомогою якого ми можемо звернутися до всіх абзаців HTML сторінки і, наприклад, пофарбувати їх усіх одночасно у червоний колір.