# CSS. Селекторы ## Основные виды селекторов Основных видов селекторов всего несколько: * `*` – любые элементы * `div` – элементы с таким тегом * `#id` – элемент с данным id * `.class` – элементы с таким классом * `[name="value"]` - селекторы на атрибут * `:visited` - «псевдоклассы», остальные разные условия на элемент Селекторы можно комбинировать, записывая последовательно, без пробела: ```css .c1.c2 ``` – элементы одновременно с двумя классами c1 и c2 ```css a#id.c1.c2:visited ``` – элемент **a** с данным **id**, классами **c1** и **c2**, и псевдоклассом **visited** ## Отношения В CSS3 предусмотрено четыре вида отношений между элементами. ```css div p ``` – элементы p, являющиеся потомками div. ```css div > p ``` – только непосредственные (идущие на один уровень вложенности ниже родителя) потомки ```css div ~ p ``` – правые соседи: все p на том же уровне вложенности, которые идут после div. ```css 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 как одно из значений через пробел. Например: ```css [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 «[[psevdoelement|Псевдоэлементы]]» – различные вспомогательные элементы, которые браузер записывает или может записать в документ. При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента.