CSS. Селекторы

Основных видов селекторов всего несколько:

• * – любые элементы
• div – элементы с таким тегом
• #id – элемент с данным id
• .class – элементы с таким классом
• [name="value"] - селекторы на атрибут
• :visited - «псевдоклассы», остальные разные условия на элемент

Селекторы можно комбинировать, записывая последовательно, без пробела:

.c1.c2

– элементы одновременно с двумя классами c1 и c2

a#id.c1.c2:visited

– элемент a с данным id, классами c1 и c2, и псевдоклассом visited

В CSS3 предусмотрено четыре вида отношений между элементами.

div p

– элементы p, являющиеся потомками div.

div > p

– только непосредственные (идущие на один уровень вложенности ниже родителя) потомки

div ~ p 

– правые соседи: все p на том же уровне вложенности, которые идут после div.

div + p

– первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).

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

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

• :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 и так далее.
• :nth-last-child(a), :nth-last-child(an+b) – то же самое, но отсчёт начинается с конца. Например:
  • Элемент ненумерованного списка: :nth-last-child(2) – второй элемент с конца.

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

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

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

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

• [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».

• :not(селектор) – все, кроме подходящих под селектор.
• :focus – в фокусе.
• :hover – под мышью.
• :empty – без детей (даже без текстовых).
• :checked, :disabled, :enabled – состояния INPUT.
• :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #… текущего URL. Например, если на странице есть элемент с id=«intro», то правило :target { color: red } подсветит его в том случае, если текущий URL имеет вид http://...#intro.

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

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