Способи вибору селектору для стилю

Документація по варінтам селекторів

по *

До усіх єлементів практично примусово. Його вага меньше за селектору по тегу

Специфічність: 0.0.0

*{color: cyan;}

по тегу html

Наслідує до усіх підлеглих по можливості

Специфічність: 0.0.1

body{color: cyan;}

Наслідує до усіх що у тегу p

p{color: cyan;}

по id

В ідеалі повинен бути уникальним. Але працює і так.

html додаєемо параметр id=«myid»

в css вказує цє їмя атрибуту починаючи з решітки #

#title {
font-weight: 500;
color: orange;
}

по класу class

Може бути не унікальним

html додаєемо параметр class=«myclassname»

в css вказує цє їмя класу починаючи з точки

В імені класу використовуються лише маленькі літери та тире. Наприклад list, list-item, logo-image тощо. Підкреслення list_item, великі літери ListItem або цифри listitem27 вважаються поганим тоном.

.myclassname{
color: blue;
}

Можна вказувати декілька класів через пробіл

<a href="" class="header-logo link">

По data-атрибуту

Будь-який атрибут, ім'я якого починається з data-, є data-* атрибутом. Припустимо, у нас є стаття і ми хочемо зберегти додаткову інформацію без візуального подання. Для цього можна використовувати data-атрибути:

<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>

по селектору нащадка (X Y)

Селектор нащадка або контекстний селектор. Використовується для вибору елементів, що відповідають певному контексту, тобто селектор застосовує стилі до ВСІХ нащадків елемента за будь-якої глибини вкладеності.

/* Застосовується до посилань, які лежать усередині неупорядкованих списків */
ul a {
color: tomato;
}
/* Застосовується лише до посилань, що лежать усередині тега з класом social-links */
.social-links a {
color: tomato;
}
/* Застосовується лише до класу title, що лежать усередині класу club-list */
.club-list .title {
color: #4caf50;
}

по дочірньому селектору (X > Y)

Дозволяє вибрати безпосередньо лише дочірній елемент всередині батьківського елемента. Вибирає ЛИШЕ ті <li>, які є дочками (перша вкладеність) у списку ul.menu

/* Те що потрібно */
.menu > li {
border: 1px solid tomato;
}

Селектори стану (X:state)

Селектори стану (псевдокласи) використовуються для застосування стилів до інтерактивних елементів (елементи, з якими користувач може взаємодіяти). Стиль застосовується до елемента лише за певної події, наприклад, за наведення курсора на посилання або фокусування з клавіатури. Аби показати взаємозв’язок між селектором і псевдокласом, ставити пробіл не потрібно. Якщо додати пробіл, то псевдоклас застосовується до всіх елементів документа, тобто між ними НЕ ТРЕБА ставити пробіл.

Псевдоклас: hover

активується, коли курсор миші знаходиться в межах елемента, наприклад, при наведенні миші на посилання або будь-який інший елемент.

.link {
color: teal;
}
.link:hover {
color: tomato;
}

.page-nav .link {
color: #00bcd4;
}
.page-nav .link:hover {
color: #18ffff;
}

Псевдоклас: active

Результат застосування стає видимий під час активації елемента. Посилання стає активним, якщо навести на нього курсор і клацнути мишкою. Попри те, що активним може стати практично будь-який елемент, псевдоклас:active використовується в основному для посилань і кнопок.

.page-nav .link:active {
color: #212121;
}

Псевдоклас :focus

Активується, коли інтерактивний елемент (посилання, кнопка, поле форми) отримує фокус при натисканні на нього мишкою або при навігації по сторінці клавіатурою (клавішею Tab).

.social-links .link {
color: teal;
}
.social-links .link:focus {
color: orange;
}

Для того, щоб врахувати наведення та фокусування, варто стилізувати обидва стани одразу. Це робиться простим перерахуванням селекторів.

.social-links .link {
color: teal;
}
/* Два і більше селекторів для одного правила поділяються комою */
.social-links .link:hover,
.social-links .link:focus {
color: orange;
}

Різне

На один єлемент при вказанні классів можна через пробіл додавати додатковий клас у котрому будуть вже щось загальне вказано