MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS Селекторы

Селектор определяет, к какому элементу применять то или иное 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 Рекомендация Изначальное определение

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

Уровень поддержки 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

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

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