CSS селекторы
Приветствую. Сегодня мы разберем все css селекторы. Ниже подробные таблицы с детальным описанием каждого селектора.
Явные селекторы
Эти селекторы указываются в HTML документе, можно посмотреть исходный код и увидеть нужный селектор.
| Селектор | Пример | Описание |
|---|---|---|
| * | * | Все элементы, кроме псевдо-элементов. |
| .class | .classname | Элемент с class="classname". |
| #id | #container | Элемент с id="container". |
| HTML тег | div | Элемент <div>. |
| [атрибут] | [name] | Элементы с атрибутом name. |
| [атрибут = значение] | [name=admin] | Элементы с атрибутом name="admin". |
| [атрибут ~= значение] | [name~=admin] | Элементы с атрибутом name, в значение которого есть admin |
| [атрибут ^= значение] | [src^="http"] | Элементы с атрибутом src, значение которого начинается с http. |
| [атрибут $= значение] | [src$=".jpg"] | Элементы с атрибутом src, значение которого заканчивается на .jpg. |
| [атрибут *= значение] | [src*="http"] | Элементы с атрибутом src, в значении которого присутствует 'http'. |
Псевдо-классы
Начинаются с двоеточия, не указываются в разметке документа.
| Псевдо-класс | Пример | Описание | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. Вместо '<a>' может быть любой элемент. | ||||||||||||
| :active | a:active | Выбор активной ссылки. | ||||||||||||
| :link | a:link | Выбор всех не посещенных ссылок. | ||||||||||||
| :visited | a:visited | Выбор всех посещенных ссылок. | ||||||||||||
| :first-child | div:first-child | Выбор первого дочернего элемента <div>, если у родителя первый элемент именно <div>. | ||||||||||||
| :last-child | div:last-child | Выбор последнего дочернего элемента <div>, если у родителя последний элемент именно <div>. | ||||||||||||
| :only-child | div:only-child | Выбор дочернего элемента <div>, если у родителя всего один элемент и это <div>. | ||||||||||||
| :nth-child(n) |
| |||||||||||||
| :nth-last-child(n) | div:nth-last-child(2) | Выбор второго дочернего элемента <div> с конца, если второй элемент родителя равен <div>. | ||||||||||||
| :first-of-type | div:first-of-type | Выбор первого дочернего элемента <div>. | ||||||||||||
| :last-of-type | div:last-of-type | Выбор последнего дочернего элемента <div>. | ||||||||||||
| :only-of-type | div:only-of-type | Выбор дочернего элемента <div>, если у родителя элемент <div> всего один. | ||||||||||||
| :nth-of-type(n) | div:nth-of-type(2) | Выбор второго дочернего элемента <div>. | ||||||||||||
| :nth-last-of-type(n) | div:nth-last-of-type(2) | Выбор второго дочернего элемента <div> с конца. | ||||||||||||
| :enabled | input:enabled | Выбор включенного <input>. | ||||||||||||
| :disabled | input:disabled | Выбор выключенного <input>. | ||||||||||||
| :focus | input:focus | Выбор <input>, который находится в фокусе. | ||||||||||||
| :checked | input:checked | Выбранный элемент <input> типа radio или checkbox. | ||||||||||||
| :root | :root | Выбор корневого элемента в документе. | ||||||||||||
| :empty | div:empty | Пустой элемент <div>, в котором нет ни текста ни элементов. | ||||||||||||
| :lang(язык) | div:lang(en) | Выбор элемента <div> с атрибутом lang, значение которого начинается с "en". | ||||||||||||
| :target | :target | Выбор активного элемента на странице, который имеет якорную ссылку. | ||||||||||||
| :not(селектор) | :not(div) | Выбор всех элементов, кроме <div>. | ||||||||||||
Псевдо-элементы
Элементы, которых не существуют в HTML документе. Можно сказать особая выборка.
| Псевдо-элемент | Пример | Описание |
|---|---|---|
| ::first-letter | div::first-letter | Выбирает первую букву элемента <div>. |
| ::first-line | div::first-line | Выбирает первую строку элемента <div>. |
| ::before | div::before | Вставляет указанное в content:" " содержимое в начало <div>. |
| ::after | div::after | Вставляет указанное в content:" " содержимое в конец <div>. |
| ::selection | div::selection | Оформит выделенный (мышкой) текст внутри <div>. |
Объединение селекторов
Используются символы комбинаторы: , >, +, ~, ,. Они устанавливают связь между селекторами.
| Комбинатор | Пример | Описание |
|---|---|---|
| правило, правило | div a, span i | Элемент <a> внутри <div> и элемент <i> внутри <span>. |
| селекторСелектор | .quote.active | Элементы одновременно с двумя классами quote и active. |
| селектор селектор | div span | Элемент <span> внутри <div>. |
| селектор > селектор | div > span | Элементы <span>, у которых родитель <div>. |
| селектор + селектор | div + p | Один элемент <p>, который находится сразу после <div>. |
| селектор ~ селектор | div ~ p | Все элементы <p>, которые находятся сразу после <div>. |
