Содержание

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

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

по *

*{color: cyan;}

по тегу html

body{color: cyan;}

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

p{color: cyan;}

по id

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

  1. html додаєемо параметр id=«myid»
  2. в css вказує цє їмя атрибуту починаючи з решітки #
#title {
  font-weight: 500;
  color: orange;
}

по класу class

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

  1. html додаєемо параметр class=«myclassname»
  2. в 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;
}

Різне