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

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

*{color: cyan;}

Наслідує до усіх підлеглих по можливості
Специфічність: 0.0.1

body{color: cyan;}

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

p{color: cyan;}

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

html додаєемо параметр id=«myid»
в css вказує цє їмя атрибуту починаючи з решітки #

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

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

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-атрибути:

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

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

/* Застосовується до посилань, які лежать усередині неупорядкованих списків */
ul a {
  color: tomato;
}

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

/* Застосовується лише до класу title, що лежать усередині класу club-list */
  .club-list .title {
    color: #4caf50;
  }

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

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

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

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

.link {
  color: teal;
}

.link:hover {
  color: tomato;
}

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

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

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

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

Активується, коли інтерактивний елемент (посилання, кнопка, поле форми) отримує фокус при натисканні на нього мишкою або при навігації по сторінці клавіатурою (клавішею 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;
}