Селекторы

Синтаксис css

селектор {
  свойство1: значение;
  свойство2: значение;
  свойство3: значение;
}

Виды селекторов

КЛАССЫ и ID не могут начинаться с цифры! ID только один на странице или во всем проекте!

/* ОБЩИЙ (все тэги) */
* { ... }

/* АТТРИБУТНЫЙ */
/* Все элементы, у которых есть аттрибут style */
[style] { ... }

/* ТЕГОВЫЙ */
p { ... }

/* КЛАССОВЫЙ */
.some-classname { ... }
/* <p class="some-classname">...</p> */

/* ID */
#some-id { ... }
/* <p id="some-id">...</p> */

/* ВЛОЖЕННЫЙ (с пробелом) */
p a { ... }

/* СОСЕДНИЙ */
p + a { ... }

/* ДОЧЕРНИЙ */
p > a { ... }

/* ОБЪЕДИНЁННЫЙ (без пробела) */
.class1.class2 { ... }

/* ГРУППОВОЙ (через запятую) */
.class1, .class2, .class3 { ... }

Избирательные

/* ТЭГ с АТТРИБУТОМ */
input[type="password"] { ... }

/* Селектор по НАЧАЛУ названия атрибута */
div[class^="column-"] { ... }

/* Селектор по КОНЦУ названия атрибута */
a[href$=".pdf"] { ... }

/* ОДИН из классов */
div[class~="column"] { ... }

/* Селектор НАЧАЛУ НАЗВАНИЯ */
div[class|="column"] { ... }

Псевдоклассы

/* корневой псевдокласс для css-переменных */
:root { ... }

/* Псевдоэлементы */
::before, ::after { content: ""; }

/* Выделение текста */
::selection { ... }

/* Первый потомок */
:first-child { ... }

/* Последний потомок */
:last-child { ... }

/* Номер потомка */
:nth-child(odd | even | 3 | 2n | 1n + 6) { ... }
  (odd) - нечётные;
  (even) - чётные;
  (2n) - каждый 2-ой;
  (1n + 6) - все элементы, начиная с 6-ого;
  (2n + 6) - каждый 2-й, начиная с 6-ого;
  (3n + 9) - каждый 3-й, начиная с 9-ого;

/* ОТРИЦАЮЩИЙ селектор */
ul li:not(:last-child) { ... }

/* ПУСТОЙ селектор (если нет текста или других тэгов) */
ul li:empty { ... }

/* Cелектор ПЕРВОЙ ЛИНИИ */
p::first-line { ... }

/* Cелектор ПЕРВОЙ БУКВЫ */
span::first-letter { ... }

/* Cелектор ЕДИНСТВЕННОГО ДОЧЕРНЕГО ЭЛЕМЕНТА */
ul li:only-child { ... }

/* Cелектор ДОЧЕРНЕГО ЭЛЕМЕНТА ПО НОМЕРУ С КОНЦА */
ul li:nth-last-child(2) { ... }

/* Cелектор ПЕРВОГО ТИПА */
ul:first-of-type { ... }

/* Выберет первый список в коде */
<ul><li>1</li></ul>
<ul><li>2</li></ul>

/* Cелектор ПОСЛЕДНЕГО ТИПА */
ul:last-of-type { ... }

/* Cелектор n-ОГО ТИПА */
/* Выберет 3-й список в коде c начала */
:nth-of-type(3) { ... }

/* Cелектор n-ОГО ТИПА С КОНЦА */
/* Выберет 3-й список в коде c конца */
:nth-last-of-type(3) { ... }

/* Cелектор ЕДИНСТВЕННОГО ТИПА */
ul:only-of-type { ... }
/* Выберет список, если он является единственным в своём родителе */

Для ссылок

/* Работает при наведении курсора */
:hover { ... }

/* Работает при нажатии кнопки мыши */
:active { ... }

/* Фокус по табу. Работает также для input */
:focus { ... }

/* Можно стилизовать родителя, если какой-ниб дочерний элемент находится в фокусе */
:focus-within { ... }

/* Выбирает непосещенные ссылки */
:link { ... }

/* Выбирает посещенные ссылки */
:visited { ... }

/* Для якорных объектов, через id */
:target { ... }
/* Если заголовок h2 будет якорем для какой-либо ссылки,
то по клику на связанную якорную ссылку, он поменяет цвет  */

/* Если нужно сдвинуть скролл по якорю */
:target {
  scroll-margin-top: 200px;
}

Для форм

/* Работает для форм и элементов форм, у кот. НЕ СТОИТ атрибут disabled */
:enabled { ... }

/* Работает для форм и элементов форм, у кот. стоит атрибут read-only */
/* input[readonly] */
:read-only { ... }

/* Работает для форм и элементов форм, кот. доступны для редактирования */
/* input:not([readonly] */
:read-write { ... }

/* Выбирает формы С атрибутом обязательного заполнения */
/* input[required] */
:required { ... }

/* Выбирает формы БЕЗ required */
:optional { ... }

/* Выбирает формы c атрибутом checked */
/* Работает с инпутами radio и checkbox */
:checked { ... }

/* Выбирает элементы с КОРРЕКТНЫМ введённым значением */
/* Корректность ввдённых данных должна быть указана в атрибуте pattern */
:valid { ... }

/* Выбирает элементы с НЕКОРРЕКТНЫМ введённым значением */
:invalid { ... }

/* Выбирает элементы, значение кот. ПОПАДАЕТ в указанный диапозон */
/* Работает с type="mumber" min="..." max="..." */
:in-range { ... }

/* Выбирает элементы, значение кот. НЕ ПОПАДАЕТ в указанный диапозон */
/* Работает с type="mumber" min="..." max="..." */
:out-of-range { ... }

/* Стилизация placeholder в состоянии ПОКОЯ */
/* Стилизация placeholder в состоянии ВВОДА */
::placeholder { ... }
#input-id::placeholder {...}
#input-id[placeholder] {...}

---

Приоритетность (варианты стилизации)

<!-- I место - Инлайновые стили (Самые приоритетные) -->
<p style="color: red;">...</p>

<!-- II место - Внутри тега style -->
<style>
    p {
    color: red;
  }
</style>

<!-- III место - Через id -->
<p id="name">...</p>

<!-- IV место - Через классы -->
<p class="name">...</p>

<!-- V место - Селекторы тэгов -->
<p>...</p>

<!-- VI место - Порядок в css-коде -->
p { color: red; } p { color: green; }

Вычисление cпецифичности

Чем больше специфичность, тем сильнее влияние. При равной специфичности играет роль порядок в коде, чем ниже, тем приоритетнее

---

Наследование

Наследуемые свойства

line-height;
color;
font-size, font-family, font-style, font-weight;
text-transform, text-align, text-indent;
letter-spacing, white-space, word-spacing, direction;
list-style, visibilyty, cursor, border-collapse;

Ненаследуемые свойства

background;
position;
height, width;
margin, padding;

Управление наследованием

initial - по умолчанию
unset  - если наследуется, то как у родителя, если нет - то initial
inherit - принудительно наследовать у родителя