Селектор определяет, к какому элементу применять то или иное CSS-правило.

Базовые селекторы

Селекторы по элементу
Этот базовый селектор выбирает элемент, к которому будем применятся правило.
Синтаксис: элемент
Пример: селектор input выберет все элементы <input>.
Селекторы по классу
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем).
Селекторы по идентификатору
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. 
Синтаксис: #имяИдентификатора
Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем).
Универсальный селектор
Этот базовый селектор выбирает все элементы. Он также существует в варианте для локального и глобального пространств имен.
Syntax: * ns|* *|*
Example: селектор * выберет все эелементы. 
Селекторы по атрибуту
Этот базовый селектор выбирает элементы, основываясь на одном из их атрибутов и/или его значении.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Пример: селектор [autoplay] выберет все элементы с атрибутом autoplay (независимо от его значения).

Комбинаторы

Соседние селекторы
Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор ul + li выберет любой <li> элемент, который  находится непосредственно после элемента <ul>.
Родственные селекторы
Комбинатор'~' выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.
Синтаксис: A ~ B
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.
Дочерние селекторы
Комбинатор '>' выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Пример: селектор ul > li выберет все элементы <li>, которые находятся внутри элемента <ul> element.
Вложенные селекторы
Комбинатор ' ' выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.

Псевдоэлементы

Псевдоэлементы являются абстрактными, в отличие от элементов HTML, отвечающих за представление. Например, в HTML нет отдельных элементов для обозначения первой буквы или первой строчки текста, или маркера для неупорядоченного списка. Псевдоэлементы обозначают такие объекты и дают возможность стилизовать их с помощью CSS.

Псевдоклассы

Псевдоклассы позволяют выбирать элементы, основываясь на информации, которой нет в дереве элементов, например, состояние или другие данные, которые сложно вычленить другим способом. Например, они могут выбрать ссылку, которая была или не была ранее посещена. 

Спецификации

Спецификация Статус Комментарии
Selectors Level 4 Рабочий черновик  
Selectors Level 3 Рекомендация  
CSS Level 2 (Revision 1) Рекомендация  
CSS Level 1 Рекомендация Изначальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Уровень поддержки Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1 1.0 (1.7 или ранее) 3.0 3.5 1.0
Уровень поддержки Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка  
1.5 1.0 (1.9.2) ? ? 3.2

Метки документа и участники

Внесли вклад в эту страницу: bezik, irenprkpv
Обновлялась последний раз: bezik,