====== Способи вибору селектору для стилю ======
[[https://www.w3schools.com/cssref/css_selectors.php|Документація по варінтам селекторів]]
===== по * =====
  * До усіх єлементів практично примусово. Його вага меньше за селектору по тегу
  * Специфічність: 0.0.0
<code>
*{color: cyan;}
</code>
===== по тегу html=====
  * Наслідує до усіх підлеглих по можливості
  * Специфічність: 0.0.1
<code>
body{color: cyan;}
</code>
Наслідує до усіх що у тегу p
<code>
p{color: cyan;}
</code>
===== по id =====
В ідеалі повинен бути уникальним. Але працює і так.
  - html додаєемо параметр id="myid"
  - в css вказує цє їмя атрибуту починаючи з решітки #
<code>
#title {
  font-weight: 500;
  color: orange;
}
</code>
===== по класу class =====
Може бути не унікальним
  - html додаєемо параметр class="myclassname"
  - в css вказує цє їмя класу починаючи з точки

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

<code>
.myclassname{
    color: blue;
}
</code>
Можна вказувати декілька класів через пробіл
<code>
<a href="" class="header-logo link">
</code>
===== По data-атрибуту =====
Будь-який атрибут, ім'я якого починається з data-, є data-* атрибутом. Припустимо, у нас є стаття і ми хочемо зберегти додаткову інформацію без візуального подання. Для цього можна використовувати data-атрибути:
<code>
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

</code>

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

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

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

/* Застосовується лише до класу title, що лежать усередині класу club-list */
  .club-list .title {
    color: #4caf50;
  }
</code>
===== по дочірньому селектору (X > Y) =====
Дозволяє вибрати безпосередньо лише дочірній елемент всередині батьківського елемента.
Вибирає ЛИШЕ ті <li>, які є дочками (перша вкладеність) у списку ul.menu
<code>
/* Те що потрібно */
.menu > li {
  border: 1px solid tomato;
}
</code>
===== Селектори стану (X:state) =====
Селектори стану (псевдокласи) використовуються для застосування стилів до інтерактивних елементів (елементи, з якими користувач може взаємодіяти). Стиль застосовується до елемента лише за певної події, наприклад, за наведення курсора на посилання або фокусування з клавіатури. Аби показати взаємозв’язок між селектором і псевдокласом, ставити пробіл не потрібно. Якщо додати пробіл, то псевдоклас застосовується до всіх елементів документа, тобто **між ними НЕ ТРЕБА ставити пробіл**.
==== Псевдоклас: hover ====
активується, коли курсор миші знаходиться в межах елемента, наприклад, при наведенні миші на посилання або будь-який інший елемент.
<code>
.link {
  color: teal;
}

.link:hover {
  color: tomato;
}
</code>
<code>
.page-nav .link {
  color: #00bcd4;
}

.page-nav .link:hover {
  color: #18ffff;
}
</code>
==== Псевдоклас: active ====
Результат застосування стає видимий під час активації елемента. Посилання стає активним, якщо навести на нього курсор і клацнути мишкою. Попри те, що активним може стати практично будь-який елемент, псевдоклас:active використовується в основному для посилань і кнопок.
<code>
.page-nav .link:active {
  color: #212121;
}
</code>
==== Псевдоклас :focus ====
Активується, коли інтерактивний елемент (посилання, кнопка, поле форми) отримує фокус при натисканні на нього мишкою або при навігації по сторінці клавіатурою (клавішею Tab).
<code>
.social-links .link {
  color: teal;
}

.social-links .link:focus {
  color: orange;
}
</code>
Для того, щоб врахувати наведення та фокусування, варто стилізувати обидва стани одразу. Це робиться простим перерахуванням селекторів.
<code>
.social-links .link {
  color: teal;
}

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

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