Это старая версия документа!
# 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
«Псевдоэлементы» – различные вспомогательные элементы, которые браузер записывает или может записать в документ.
При помощи псевдоэлементов ::before и ::after можно добавлять содержимое в начало и конец элемента.