CSS-селекторы

Селектор CSS - это один из фундаментальных механизмов CSS, реализация которого позволяет определять, к каким элементам документа будет применено то или иное CSS-правило (стиль).

Базовые правила типографики CSS:

1. используйте стандартные шрифты;
2. используйте не больше двух шрифтов на странице;
3. используйте достаточный размер шрифта;
4. используйте достаточный межстрочный интервал;
5. выравнивайте текст по левому краю.

Базовые (основные) селекторы CSS

Приоритет стилей CSS из разных источников (от слабого к сильному):

1. стили по умолчанию, которые добавляет браузер;
2. стили в отдельном css-файле;
3. стили в атрибуте тега.

Важность (приоритет) селекторов CSS (от слабого к сильному):

1. тег;
2. class;
3. id;
4. inline (указание style="..." внутри тега);
5. !important

Обобщённые свойства CSS важнее отдельных: если в коде вы указали для элемента font-variant: small-caps; (капитель), а потом для этого же элемента применили font: 16px/24px sans-serif;, то капитель будет сброшена.

Подробнее о пространстве имен @namespace

Синтаксис селектора	Функционал	Пример
Универсальный
ns|* - все элементы в пространстве имен ns * или *|* - все элементы |* - все элементы без объявленного пространства имен	Выбор всех элементов (по желанию, может быть ограничен определённым пространством имён).	* { font-size: 40px; } 1   * { font-size: 40px; } ns|* { font-size: 40px; } 1   ns|* { font-size: 40px; }
По типу элемента
ns|h1 - элементs <h1> в пространстве имен ns *|h1 - все элементы <h1> |h1 - все элементы <h1> без объявленного пространства имен	Выбор всех элементов данного типа (по желанию, может быть ограничен определённым пространством имён).	*|p { font-size: 40px; } 1 *|p { font-size: 40px; } ns|p { font-size: 40px; } 1   ns|p { font-size: 40px; }
По классу
.class_name { style properties } /* или */ [class~=class_name] { style properties } 1 2 3 .class_name { style properties } /* или */ [class~=class_name] { style properties }	Выбор элементов на основе значения их атрибута class.	<p class="name" href="/site.com">Pete, 25</p> <style> .name { font-size: 40px; } </style> 1 2 3 4 <p class="name" href="/site.com">Pete, 25</p> <style>   .name { font-size: 40px; } </style>
По идентификатору
#id_value { style properties } 1 #id_value { style properties }	Выбор элементов на основе значения их атрибута id. Идентификатор id должен быть уникальным, т. е. использоваться только для одного элемента в документе.	<p class="name" id="age" >Pete, 25</p> <style> #age { font-size: 40px; } </style> 1 2 3 4 <p class="name" id="age" >Pete, 25</p> <style> #age { font-size: 40px; } </style>
По атрибуту
[attr] { style properties } [attr=value] { style } [attr~=value] { style } [attr|=value] { style } [attr^=value] { style } [attr$=value] { style } [attr*=value] { style } 1 2 3 4 5 6 7 [attr] { style properties } [attr=value] { style } [attr~=value] { style } [attr|=value] { style } [attr^=value] { style } [attr$=value] { style } [attr*=value] { style }	Выбор элементов на основе наличия или значения данного атрибута.	<a data-info="name" data-my-age="age">Pete, 25</a> <style> [data-info="name"] { font-size: 40px; } </style> 1 2 3 4 <a data-info="name" data-my-age="age">Pete, 25</a> <style> [data-info="name"] { font-size: 40px; } </style>

Комбинаторы селекторов

Название	Синтаксис комбинатора	Функционал	Пример
Универсальный комбинатор ","	A, B	выбирает все узлы, указанные через ","	a, p { font-size: 40px; } 1 2 3   a,  p {     font-size: 40px;   }
Комбинатор потомков ' ' (пробел)	A B	выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности)	<div data-info="name" data-my-age="age" href="/site.com">Pete, 25> <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <style> div p { font-size: 40px; } </style> 1 2 3 4 5 6 <div data-info="name" data-my-age="age" href="/site.com">Pete, 25>   <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <style>   div p { font-size: 40px; } </style>
Комбинатор дочерних элементов '>'	A > B	выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу	<div data-info="name" data-my-age="age" href="/site.com">Pete, 25> <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <p class="name" id="age" href="/site.com">Pete, 25</p> <style> div > p { font-size: 40px; } </style> 1 2 3 4 5 6 7 <div data-info="name" data-my-age="age" href="/site.com">Pete, 25>   <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <p class="name" id="age" href="/site.com">Pete, 25</p> <style>   div > p { font-size: 40px; } </style>
Комбинатор всех соседних элементов '~'	A ~ B	выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем	<div data-info="name" data-my-age="age" href="/site.com">Pete, 25 <p class="name" id="age" href="/site.com">Pete, 25</p> <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <style> p~p { font-size: 40px; } </style> 1 2 3 4 5 6 7 <div data-info="name" data-my-age="age" href="/site.com">Pete, 25   <p class="name" id="age" href="/site.com">Pete, 25</p>   <p class="name" id="age" href="/site.com">Pete, 25</p> </div> <style>   p~p { font-size: 40px; } </style>
Комбинатор следующего соседнего элемента '+'	A + B	выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель	<div> <ul> <li class="text">li 1</li> </ul> <li class="text">li 2</li> </div> <style> ul+li { font-size: 40px; } </style> 1 2 3 4 5 6 7 8 9 <div>   <ul>     <li class="text">li 1</li>   </ul>   <li class="text">li 2</li> </div> <style>   ul+li { font-size: 40px; } </style>

Псевдоклассы и псевдоэлементы

Примеры https://habr.com/ru/sandbox/50759/

Псевдоклассы
Именование	Синтаксис	Описание
Псевдоклассы знак ':'	selector:pseudo-class { property: value; } 1 2 3 selector:pseudo-class {   property: value; }	:pseudo-class (из Списка стандартных псевдоклассов), добавленное к селектору, определяет его особое состояние
:link	a:link  1 a:link	Объединяет все ссылки, которые еще не посещались
:visited	a:visited 1 a:visited	Объединяет все ссылки, которые пользователь уже успел посетить
:active	a:active 1 a:active	Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
:hover	a:hover 1 a:hover	Изменение стиля при наведении указателя мыши
:focus	input:focus 1 input:focus	Изменяет стиль при фокусировке, например для подсветки полей формы при фокусировке на нем
:first-letter	p:first-letter 1 p:first-letter	Определяет стиль для первого символа в тексте элемента
:first-line	p:first-line 1 p:first-line	Определяет стиль первой строки. Например, используется для изменения цвета текста, цвета фона и шрифта, но на этом его функции не ограничиваются.
:first-child	p:first-child 1 p:first-child	Применяет стилевое оформление к первому дочернему элементу своего родителя (например, если р - первый элемент своего родителя)
:before	p:before 1 p:before	Применяются для отображения нужного контента до или после содержимого элемента, к которому он добавляется. Работают совместно со свойством content:. Можно использовать как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item; все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none; все остальные будут восприниматься как inline. Кроме того, :before наследует стиль от элемента, к которому он добавляется.
:after	p:after 1 p:after
:lang	p:lang(it) 1 p:lang(it)	Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
:first-of-type	p:first-of-type 1 p:first-of-type	Задает правила стилей для первого элемента в списке дочерних элементов своего родителя.
:last-of-type	p:last-of-type 1 p:last-of-type	Задает правила стилей для последнего элемента в списке дочерних элементов своего родителя.
:only-of-type	p:only-of-type 1 p:only-of-type	Применяется к дочернему элементу указанного типа, только если он единственный у родителя (аналогично :first-of-type:last-of-type ).
:only-child	p:only-child 1 p:only-child	Применяется к дочернему элементу, только если он единственный у родителя
:root	:root 1 :root	Определяет корневой элемент документа.
:empty	p:empty 1 p:empty	Определяет пустые элементы — без каких-либо дочерних элементов, текста или пробелов.
:target	#news:target 1 #news:target	Определение на основе целевого элемента (например, текущего id — #news element). Используется для URL.
:enabled	input:enabled 1 input:enabled	Применяется к незаблокированным (не disabled) элементам форм.
:disabled	input:disabled 1 input:disabled	Применяется к заблокированным элементам форм.
:checked	input:checked 1 input:checked	Применяется к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они отмечены.
:not(selector)	:not(p) 1 :not(p)	Применяется ко всем элементам, которые не p (для примера). В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.
Псевдоэлементы знак '::'	selector::pseudo-element { property: value; } 1 2 3 selector::pseudo-element {   property: value; }	::pseudo-element (из Списка стандартных псевдоэлементов), добавленное к селектору, которое позволяет вам стилизовать определенную часть выбранных элементов.