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

по тегу html

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;
}

по селектору нащадка (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)

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