Пошук уроків, статей та іншого контенту
Розберіться з базовими, атрибутними, класовими, ID-, дочірніми та комбінованими селекторами CSS.
Селектор визначає, до яких HTML-елементів потрібно застосувати CSS-правила.
Загальний синтаксис:
селектор {
властивість: значення;
}Наприклад:
p {
color: navy;
}Це правило встановлює темно-синій колір тексту для всіх елементів <p>.
HTML:
<p>Перший абзац</p>
<p>Другий абзац</p>Обидва абзаци отримають однаковий стиль, тому що відповідають селектору p.
Селектор елемента вибирає всі HTML-елементи певного типу. У CSS використовують назву HTML-тегу без кутових дужок.
h1 {
color: darkgreen;
}
p {
font-size: 18px;
}Ці правила застосовуються відповідно до всіх <h1> і <p> на сторінці.
Приклад:
<h1>Заголовок сторінки</h1>
<p>Це перший абзац.</p>
<p>Це другий абзац.</p>Універсальний селектор позначається символом * і вибирає всі елементи документа.
* {
box-sizing: border-box;
}Також його можна використовувати всередині іншого селектора:
article * {
color: #333;
}Це правило вибирає всі елементи всередині <article>.
Універсальний селектор варто використовувати обережно. Правило з * може вплинути на значно більшу кількість елементів, ніж очікувалося.
Якщо кілька елементів мають однакові стилі, селектори можна об’єднати через кому:
h1,
h2,
h3 {
font-family: Arial, sans-serif;
color: #222;
}Правило застосовується до всіх <h1>, <h2> і <h3>.
Без групування довелося б написати кілька однакових правил:
h1 {
color: #222;
}
h2 {
color: #222;
}
h3 {
color: #222;
}Клас використовують, коли стиль потрібно застосувати до одного або кількох елементів.
У HTML клас задають атрибутом class:
<p class="important">Важливий текст.</p>
<p>Звичайний текст.</p>
<p class="important">Ще один важливий текст.</p>У CSS клас позначають крапкою:
.important {
color: crimson;
font-weight: bold;
}Стиль отримають обидва елементи з класом important.
Один елемент може мати кілька класів:
<button class="button primary">Зберегти</button>.button {
padding: 10px 16px;
border: 1px solid #999;
}
.primary {
background-color: royalblue;
color: white;
}У цьому прикладі кнопка відповідає і .button, і .primary.
Можна вибрати лише елементи певного типу з конкретним класом:
p.note {
background-color: lightyellow;
}Це правило застосовується до <p class="note">, але не до <div class="note">.
<p class="note">Це примітка в абзаці.</p>
<div class="note">Цей блок не відповідає селектору p.note.</div>Селектор .note вибрав би обидва елементи, а p.note — лише абзац.
Атрибут id призначений для ідентифікації конкретного елемента:
<header id="site-header">
<h1>Мій сайт</h1>
</header>У CSS ID-селектор позначають символом #:
#site-header {
background-color: #f0f0f0;
padding: 20px;
}Значення id має бути унікальним у межах HTML-документа. На сторінці не повинно бути кількох елементів з однаковим id.
<!-- Правильно -->
<nav id="main-navigation"></nav>
<!-- Неправильно: id повторюється -->
<nav id="main-navigation"></nav>
<footer id="main-navigation"></footer>Класи зазвичай використовують для багаторазових стилів, а id — для унікальних елементів.
Атрибутні селектори вибирають елементи за наявністю атрибута або за його значенням.
Синтаксис:
[назва-атрибута] {
властивість: значення;
}Наприклад:
[disabled] {
opacity: 0.5;
}Правило вибере всі елементи, які мають атрибут disabled.
<button>Активна кнопка</button>
<button disabled>Недоступна кнопка</button>Синтаксис:
[атрибут="значення"] {
властивість: значення;
}Приклад:
input[type="email"] {
border: 2px solid seagreen;
}Це правило вибирає лише поля:
<input type="email">Інші поля, наприклад <input type="text">, не будуть вибрані.
Оператор ^= перевіряє початок значення:
a[href^="https://"] {
color: green;
}Селектор вибирає посилання, адреса яких починається з https://.
Оператор $= перевіряє кінець значення:
a[href$=".pdf"] {
color: darkred;
}Це правило вибирає посилання на PDF-файли:
<a href="document.pdf">Завантажити документ</a>Оператор *= перевіряє, чи містить значення заданий фрагмент:
[class*="card"] {
border: 1px solid #ccc;
}Правило вибере елементи з класами card, product-card і card-large, тому що їхні значення містять текст card.
Селектор нащадка складається з двох або більше селекторів, розділених пробілом:
article p {
line-height: 1.6;
}Це правило вибирає всі <p>, які знаходяться всередині <article> на будь-якому рівні вкладеності.
<article>
<p>Цей абзац буде вибрано.</p>
<div>
<p>Цей абзац також буде вибрано.</p>
</div>
</article>
<p>Цей абзац не буде вибрано.</p>Пробіл означає «будь-який нащадок».
Дочірній селектор вибирає лише безпосередніх дітей елемента. Для цього використовують символ >:
.menu > li {
display: inline-block;
}Правило вибирає лише <li>, які є безпосередніми дітьми .menu.
<ul class="menu">
<li>Головна</li>
<li>
Каталог
<ul>
<li>Книги</li>
</ul>
</li>
</ul>Селектор .menu > li вибере Головна і Каталог, але не вибере Книги, тому що вкладений <li> є дитиною іншого <ul>, а не .menu.
Порівняння:
/* Усі li всередині .menu */
.menu li {
color: blue;
}
/* Лише безпосередні діти .menu */
.menu > li {
color: red;
}Комбіновані селектори дають змогу описати точніше, які елементи потрібно вибрати.
button.primary {
background-color: royalblue;
}Вибираються лише кнопки з класом primary.
<button class="primary">Вибрана кнопка</button>
<a class="primary" href="#">Це не кнопка</a>Посилання не буде вибрано, тому що воно не є елементом <button>.
section#about {
padding: 24px;
}Вибирається <section> з id="about".
Селектори класів без пробілу означають, що один елемент повинен мати всі ці класи:
.card.featured {
border: 2px solid gold;
}Вибирається елемент, який має одночасно класи card і featured:
<article class="card featured">
Рекомендований матеріал
</article>Елемент із таким HTML не відповідає селектору:
<article class="card">
Звичайний матеріал
</article>Селектори можна комбінувати з нащадками та дочірніми зв’язками:
.sidebar > .menu a {
color: #444;
}Цей селектор означає:
знайти елемент із класом sidebar;
серед його безпосередніх дітей знайти елемент із класом menu;
вибрати всі посилання всередині .menu.
Нижче наведено невелику сторінку, у якій використано різні типи селекторів.
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Приклад CSS-селекторів</title>
<style>
/* Селектор елемента */
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5f5f5;
}
/* ID-селектор */
#site-header {
padding: 24px;
background-color: #243447;
color: white;
}
/* Класовий селектор */
.container {
max-width: 700px;
margin: 0 auto;
padding: 24px;
}
/* Дочірній селектор */
.menu > li {
display: inline-block;
margin-right: 16px;
}
/* Селектор нащадка */
.menu a {
color: white;
text-decoration: none;
}
/* Комбінований селектор: article з двома класами */
article.card.featured {
border: 2px solid #e0a800;
}
/* Атрибутний селектор із точним значенням */
input[type="email"] {
border: 2px solid seagreen;
padding: 8px;
}
/* Атрибутний селектор за наявністю атрибута */
button[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
/* Селектор групування */
h1,
h2 {
margin-top: 0;
}
.card {
margin-top: 16px;
padding: 16px;
background-color: white;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<header id="site-header">
<h1>Навчальні матеріали</h1>
<ul class="menu">
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</header>
<main class="container">
<article class="card featured">
<h2 id="css">CSS-селектори</h2>
<p>Цей матеріал позначений як рекомендований.</p>
</article>
<article class="card">
<h2 id="html">HTML-елементи</h2>
<p>Це звичайна картка без класу featured.</p>
</article>
<form>
<p>
<label for="email">Електронна пошта:</label>
<input id="email" type="email">
</p>
<button type="submit">Надіслати</button>
<button type="button" disabled>Недоступна дія</button>
</form>
</main>
</body>
</html>Якщо кілька правил змінюють одну властивість одного елемента, браузер визначає, яке правило має більший пріоритет. Одним із головних факторів є специфічність селектора.
Загалом пріоритет зростає приблизно так:
селектор елемента;
класовий або атрибутний селектор;
ID-селектор.
Приклад:
<p id="message" class="warning">Повідомлення</p>p {
color: black;
}
.warning {
color: orange;
}
#message {
color: red;
}Елемент стане червоним, тому що #message має вищу специфічність, ніж .warning і p.
Не варто без потреби використовувати ID-селектори для звичайних компонентів. Класові селектори легше повторно використовувати та перевизначати.
Псевдоклас описує стан елемента. Він записується після двокрапки.
Наприклад, :hover застосовується, коли курсор знаходиться над елементом:
.button:hover {
background-color: #333;
color: white;
}HTML:
<button class="button">Наведіть курсор</button>Псевдоклас можна поєднувати з іншими селекторами:
nav a:hover {
text-decoration: underline;
}Це правило застосовується до посилань усередині nav лише під час наведення курсору.
Неправильно:
button {
background-color: blue;
}Це правило вибере всі кнопки, а не лише кнопки з класом button.
Правильно:
.button {
background-color: blue;
}Для класу потрібна крапка, а для ID — символ #.
Ці селектори мають різне значення:
.card .title {
color: blue;
}Вибирає елемент .title, який знаходиться всередині .card.
.card.title {
color: red;
}Вибирає один елемент, який одночасно має класи .card і .title.
.menu li {
color: blue;
}Вибирає всі <li> на будь-якій глибині всередині .menu.
.menu > li {
color: red;
}Вибирає лише безпосередніх дітей .menu.
Не використовуйте однаковий id для кількох елементів:
<!-- Неправильно -->
<p id="text">Перший абзац</p>
<p id="text">Другий абзац</p>Для повторюваного стилю використовуйте клас:
<p class="text">Перший абзац</p>
<p class="text">Другий абзац</p>.text {
color: #333;
}Правило p { color: red; } змінює всі абзаци сторінки. Якщо стиль потрібен лише в певному місці, уточніть селектор:
.article p {
color: red;
}Використовуйте селектор елемента для загальних правил, які стосуються всіх елементів певного типу.
Використовуйте клас для повторюваних компонентів і станів.
Використовуйте ID для унікального елемента.
Використовуйте атрибутні селектори, коли стиль залежить від атрибута або його значення.
Використовуйте пробіл для пошуку нащадків на будь-якій глибині.
Використовуйте > для пошуку лише безпосередніх дітей.
Об’єднуйте селектори, коли потрібно точніше описати елемент.
CSS-селектор визначає елементи, до яких застосовуються стилі.
Базові селектори включають селектори елементів, універсальний селектор і групування селекторів.
Класовий селектор починається з ..
ID-селектор починається з #.
Атрибутні селектори дають змогу вибирати елементи за атрибутами.
Пробіл між селекторами означає будь-якого нащадка.
Символ > означає безпосередню дитину.
Відсутність пробілу між класами означає, що елемент повинен мати всі зазначені класи.
Специфічніші селектори мають більший пріоритет під час застосування стилів.