Референсное руководство по селекторам CSS

Селекторы CSS

Селекторы CSS используются для "поиска" (или выбора) HTML элементов, стили для которых вы хотите определить.

Используйте наш тестер CSS селекторов, чтобы продемонстрировать различные селекторы.

Простые селекторы CSS

Простые селекторы выбирают элементы по имени, id и классу. Кроме того, есть универсальные селекторы (*)

Выборщик Пример Описание примера
элемент p Выбрать все элементы <p>.
#id #firstname Выбрать элемент с id="firstname".
* * Выбрать все элементы.
.class .intro Выбрать каждый элемент с классом "intro".

Селекторы свойств CSS

Селекторы свойств выбирают HTML элементы с заданным набором свойств.

Выборщик Пример Описание примера
[attribute] [target] Выбрать каждый элемент, имеющий атрибут target.
[attribute=value] [target=_blank] Выбрать каждый элемент, имеющий атрибут target="_blank".
[attribute~=value] [title~=flower] Выбрать каждый элемент, значение атрибута title содержит слово "flower".
[attribute|=value] [lang|=en] Выбрать каждый элемент, значение атрибута lang начинается с "en".
[attribute^=value] a[href^="https"] Выбрать каждый элемент <a>, значение атрибута href начинается с "https".
[attribute$=value] a[href$=".pdf"] Выбрать каждый элемент <a>, значение атрибута src заканчивается на ".pdf".
[attribute*=value] a[href*="codew3c"] Выбрать каждый элемент <a>, значение атрибута href которого содержит подстроку "abc".

Вложенные выборки CSS

Выборщик Пример Описание примера
& & Применение стиля к элементу в контексте другого элемента