CSS

CSS-селекторы

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы

Универсальный селектор

Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента

Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определён в атрибуте class="index").

Селекторы по идентификатору

Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. 
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определён в атрибуте id="toc").

Селекторы по атрибуту

Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор [autoplay] выберет все элементы, у которых есть  атрибут autoplay (независимо от его значения).

На атрибут целиком:

[attr] – атрибут установлен, [attr="val"] – атрибут равен val.

На начало атрибута:

[attr^="val"] – атрибут начинается с val, например "value". [attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1".

На содержание:

[attr*="val"] – атрибут содержит подстроку val, например равен "myvalue". [attr~="val"] – атрибут содержит val как одно из значений через пробел. Например: [attr~="delete"] верно для "edit delete" и неверно для "undelete" или "no-delete".

На конец атрибута:

[attr$="val"] – атрибут заканчивается на val, например равен "myval".

Отношения

Фильтр по месту среди соседей

При выборе элемента можно указать его место среди соседей.

Список псевдоклассов для этого:

• :first-child – первый потомок своего родителя.

• :last-child – последний потомок своего родителя.

• :only-child – единственный потомок своего родителя, соседних элементов нет.

• :nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.

• :nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.

  Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.

  • :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
  • :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.

Фильтр по месту среди соседей с тем же тегом

Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом:

• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type
• :nth-last-of-type

Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.

Комбинаторы

Комбинатор запятая

Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента - и <div> и <span>.

Комбинатор потомков

Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.

Дочерние селекторы

Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.

Комбинатор всех соседних элементов

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который  находится непосредственно после элемента <ul>.

Псевдо

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

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам <a> которые имеют статус "посещённые".
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

Другие псевдоклассы

• :not(селектор) – все, кроме подходящих под селектор.

• :focus – в фокусе.

• :hover – под мышью.

• :empty – без детей (даже без текстовых).

• :checked, :disabled, :enabled – состояния INPUT.

• :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #... текущего URL.

  Например, если на странице есть элемент с id="intro", то правило :target { color: red } подсветит его в том случае, если текущий URL имеет вид http://...#intro.

Псевдоэлементы

Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца <p>.

Другие псевдоэлементы

«Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ.

При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента: