CSS-селекторы
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
Базовые селекторы
Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.
Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор 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 (независимо от его значения).
Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».
Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».
Комбинаторы
Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и и .
Комбинатор ‘ ‘ (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы , которые находятся внутри элемента .
Комбинатор ‘>’ в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Комбинатор ‘~’ выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Комбинатор ‘+’ выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор h2 + p выберет первый элемент , который находится непосредственно после элемента (en-US).
Псевдо
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца .
Версии CSS
| Спецификация | Статус | Комментарии |
|---|---|---|
| Selectors Level 4 | Рабочий черновик | Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них. |
| Selectors Level 3 | Рекомендация | Добавлен комбинатор ~ и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов. |
| CSS Level 2 (Revision 1) | Рекомендация | Добавлен комбинатор потомков > и комбинатор следующего соседа + . Добавлен универсальный (*) комбинатор и селектор атрибутов. |
| CSS Level 1 | Рекомендация | Первоначальное определение. |
Смотрите также
Found a content problem with this page?
This page was last modified on 22 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
CSS селекторы
Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
- селектор типа
- универсальный селектор
- селекторы атрибутов
- селектор идентификатора
- селектор класса
- псевдо-классы
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
span[title].className p.className1.className2#someId:hover
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
Псевдо-классы
Псевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом.
| Псевдо-класс | Пример | Описание | CSS |
|---|---|---|---|
| :link | a:link | Выбор всех не посещенных ссылок. | 1 |
| :visited | a:visited | Выбор всех посещенных ссылок. | 1 |
| :active | a:active | Выбор активной ссылки. | 1 |
| :hover | a:hover | Выбор ссылки при наведении курсора мышки. | 1 |
| :focus | input:focus | Выбор элемента , который находится в фокусе. | 2 |
| :first-child | p:first-child | Выбор каждого элемента , который является первым дочерним элементом своего родителя. | 2 |
| :lang(язык) | p:lang(ru) | Выбор каждого элемента с атрибутом lang , значение которого начинается с «ru». | 2 |
| :first-of-type | p:first-of-type | Выбор каждого элемента , который является первым из элементов своего родительского элемента. | 3 |
| :last-of-type | p:last-of-type | Выбор каждого элемента , который является последним из элементов своего родительского элемента. | 3 |
| :only-of-type | p:only-of-type | Выбор каждого элемента , который является единственным элементом своего родительского элемента. | 3 |
| :only-child | p:only-child | Выбор каждого элемента , который является единственным дочерним элементом своего родительского элемента. | 3 |
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента. | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента. | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 |
| :last-child | p:last-child | Выбор каждого элемента , который является последним элементом своего родительского элемента. | 3 |
| :root | :root | Выбор корневого элемента в документе. | 3 |
| :empty | p:empty | Выбор каждого элемента , который не содержит дочерних элементов (включая текст). | 3 |
| :target | :target | Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. | 3 |
| :enabled | input:enabled | Выбор каждого включенного элемента . | 3 |
| :disabled | input:disabled | Выбор каждого выключенного элемента . | 3 |
| :checked | input:checked | Выбор элемента , выбранного по умолчанию или пользователем. | 3 |
| :not(селектор) | :not(p) | Выбор всех элементов, кроме элемента . | 3 |
Псевдо-элементы
Псевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей.
| Псевдо-элемент | Пример | Описание | CSS |
|---|---|---|---|
| ::first-letter | p::first-letter | Выбор первой буквы каждого элемента . | 1 |
| ::first-line | p::first-line | Выбор первой строки каждого элемента . | 1 |
| ::before | p::before | Добавляет элемент с содержимым перед содержимым каждого элемента . | 2 |
| ::after | p::after | Добавляет элемент с содержимым после содержимого каждого элемента . | 2 |
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru