Гайд по CSS селекторам
Якщо ти тільки почав відкривати для себе CSS, то знання про селектори - це основа розуміння CSS. Селектори - це те, що допомагає визначити певний HTML елемент і додати до нього стилі. Тож не будемо обговорювати стилі і зосередимось на селекторах.
В прикладах нижче, CSS буде знаходитись у файлі під назвою style.css, на який буде посилатись HTML, який зберігатиметься в index.html. Це два окремих файли і це великий плюс CSS - зберігання дизайну окремо від документа.
Ось приклад HTML документу:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ми вивчаємо селектори!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
А CSS буде складатись лише з селекторних блоків.
ID селектор
HTML:
<!-- Підійде -->
<div id="happy-cake"></div>
<!-- Підійде -->
<aside id="happy-cake"></aside>
<!-- Не підійде -->
<div id="sad-cake">Неправильний ID</div>
<!-- Не підійде -->
<div class="happy-cake">Це не ID!</div>
CSS:
#happy-cake {
}
ID селектори - самий потужний тип селекторів. Це означає, що вони “витісняють” інші типи селекторів, а стилі вказані з цим селектором застосовуються першочергово. Звучить гарно, але це не так. Дуже часто потрібні селектори, які є нижчі за “рангом”, щоб в подальшому їх було легко обійти, якщо виникте потреба.
Селектор класу
HTML:
<!-- Підійде -->
<div class="module"></div>
<!-- Підійде -->
<aside class="country module iceland"></aside>
<!-- Не підійде -->
<div class=".module">крапка потрібна для CSS, а не для HTML</div>
<!-- Не підійде -->
<div class="bigmodule">Неправильний клас</div>
CSS:
.module {
}
Це, можливо, самий використовуваний і універсальний тип селектора. Частково через те, що він гарно підтримується браузерами. Частково через те, що ви можете додавати декілька класів (через пробіл) до HTML елемента. Частково, тому що JavaScript може бути використаний для маныпулювання класами.
Тег селектор
HTML:
<!-- Підійде -->
<h2>Hi, Mom</h2>
<main>
<div>
<!-- Підійде -->
<h2>Anywhere</h2>
</div>
</main>
<!-- Не підійде -->
<div class="h2">Неправильний тег</div>
<!-- Не підійде -->
<h2class="yolo">Пробіл після тегу обов'язковий!</h2>
CSS:
h2 {
}
Цей тип селекторів дуже корисний при зміні унікальних властивостей HTML документа. Наприклад налаштування <ul> для list-style або <pre> для tab-size. Також цей тип використовується для “скидання” стилів, коли ми намагаємося відмінити стилі, який браузер використовує для певних елементів.
Не зловживайте цим типом селекторів. Краще використовувати стилювання за класом.
Селектор атрибуту
HTML:
<!-- Підійде -->
<div data-modal="open"></div>
<!-- Підійде -->
<aside class='closed' data-modal='open'></aside>
<!-- Не підійде -->
<div data-modal="false">Неправильне значення</div>
<!-- Не підійде -->
<div data-modal>Немає значення</div>
<!-- Не підійде -->
<div data-modal-open>Невірний атрибут</div>
CSS:
[data-modal="open"] {
}
Ви можете заявити, що атрибутні селектори більш корисні ніж селектори класу, тому що вони мають однакову важливість, але можуть бути будь-яким атрибутом, не тільки class, а також ми можемо вибирати їх за значенням.
Навряд це проблема, але атрибутні селектори не підтримуються IE6.
Селектор позиції
HTML:
<ul>
<li>Ні</li>
<!-- Не підійде -->
<li>Так, №2</li>
<li>Ні</li>
</ul>
CSS:
:nth-child(2) {
}
Використовуючи цей тип селектора, ви можете обрати елементи за їх положенням в HTML.
Інші псевдо-селектори
HTML:
<!-- Підійде -->
<div></div>
<!-- Підійде -->
<aside data-blah><!-- пусто --></aside>
<!-- Не підійде -->
<div> </div>
<!-- Не підійде -->
<div>
</div>
CSS:
:empty {
}
:empty - це один з багатьох псевдо-селекторів,які ви можете розпізнати за (:). Як правило, вони представляють поодинокі атрибути.
Це трохи інше, ніж псевдо елементи, які можна розпізнати за (::).
Додатково
Можна об'єднувати селектори. Наприклад:
.module.news {
/* Вибирає елементи з ОБОХ цих класів */
}
#site-footer::after {
/* Додає контент після елемента з таким ID */
}
section[data-open] {
/* Вибирає тільки елементи розділу, якщо вони мають цей атрибут */
}
Також існують комбінації ~, + і >, які впливають на селектори:
.module > h2 {
/* Виберіть h2 елементи, які є безпосередніми нащадками елемента з класом */
}
h2 + p {
/* Виберіть p-елементи, безпосередні нащадки h2 елемент */
}
li ~ li {
/* Виберіть li-елементи, які є братами і сестрами (або наступниками) іншого елемента li. */
}
1154 3
GR: 3.966k
Коментарі: