Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS селекторы

Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

CSS селекторПримерОписание
.class .myClass Выбирает все элементы с атрибутом class со значением myClass (class="myClass").
#id #main Выбирает элемент с атрибутом id со значением main (id="main").
* * Выбор всех элементов.
элемент span Выбор всех элементов <span>.
элемент,элемент div,span Выбор всех элементов <div> и всех элементов <span>.

Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.

span[title].className {...}
p.className1.className2#someId:hover {...}

Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.

div p>span {...}
p+a {...}

Список селекторов — это селекторы, перечисленные через запятую.

span[title], #myID {...}
p, div, .myClass {...}

Селекторы атрибутов

Селекторы атрибутов — это селекторы, которые используются для выбора элементов по наличию у них атрибутов и значений этих атрибутов.

CSS селекторПримерОписание
[атрибут] [title] Выбирает все элементы с атрибутом title.
[атрибут="значение"] [title="cost"] Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (title="cost").
[атрибут~="значение"] [title~="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) "один" (title="один и два").
[атрибут^="значение"] a[href^="https"] Выбор каждого элемента <a> с атрибутом href, значение которого начинается с "https".
[атрибут$="значение"] [src$=".png"] Выбирает все элементы с атрибутом src, значение которого оканчивается на ".png" (src="some_img.png").
[атрибут*="значение"] [title*="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "один" (title="один и два").
[атрибут|="значение"] [lang|="ru"] Выбор всех элементов с атрибутом lang, значение которого начинается с "ru".

Обратите внимание, что в таблице все значения атрибутов в селекторах атрибутов заключены в кавычки. Кавычки требуются, если значение включает в себя какие-либо спецсимволы, начинается с дефиса или цифры или иным образом недопустимо как идентификатор и должно быть заключено в кавычки как строка. Если значение является корректным идентификатором, то кавычки можно опустить.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами.

КомбинаторПримерОписание
элемент элемент div span Выбор всех элементов <span> внутри <div>.
элемент>элемент div>span Выбирает все дочерние элементы <span>, у которых родитель — элемент <div>.
элемент+элемент div+p Выбирает все элементы <p>, которые расположены сразу после элементов <div>.
элемент1~элемент2 p~ol Выбор всех элементов <ol>, которым предшествует элемент <p>.

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

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

ПсевдоклассПримерОписание
:any-link a:any-link Выбор всех посещённых и не посещённых ссылок.
:link a:link Выбор всех не посещённых ссылок.
:visited a:visited Выбор всех посещённых ссылок.
:active a:active Выбор активной ссылки.
:hover a:hover Выбор ссылки при наведении курсора мышки.
:focus input:focus Выбор элемента <input>, который находится в фокусе.
:focus-within form:focus-within Выбор элемента <form>, который сам находится в фокусе, или у которого один из потомком находится в фокусе.
:focus-visible button:focus-visible Выбор элемента <button>, если он получил фокус не с помощью мышки или касания.
:first-child p:first-child Выбор каждого элемента <p>, который является первым дочерним элементом своего родителя.
:lang(язык) p:lang(ru) Выбор каждого элемента <p> с атрибутом lang, значение которого начинается с "ru".
:first-of-type p:first-of-type Выбор каждого элемента <p>, который является первым из элементов <p> своего родительского элемента.
:last-of-type p:last-of-type Выбор каждого элемента <p>, который является последним из элементов <p> своего родительского элемента.
:only-of-type p:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента.
:only-child p:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента.
:nth-child(n) p:nth-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента.
:nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента <p>, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.
:nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента.
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента <p>, который является вторым дочерним элементом <p> своего родительского элемента, считая от последнего дочернего элемента.
:last-child p:last-child Выбор каждого элемента <p>, который является последним элементом своего родительского элемента.
:root :root Выбор корневого элемента в документе.
:empty p:empty Выбор каждого элемента <p>, который не содержит дочерних элементов (включая текст).
:target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы.
:enabled input:enabled Выбор каждого включенного элемента <input>.
:disabled input:disabled Выбор каждого выключенного элемента <input>.
:checked input:checked Выбор элемента <input>, выбранного по умолчанию или пользователем.
:not(селектор) :not(p) Выбор всех элементов, кроме элемента <p>.

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

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

ПсевдоэлементПримерОписание
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>.
::first-line p::first-line Выбор первой строки каждого элемента <p>.
::before p::before Добавляет элемент с содержимым перед содержимым каждого элемента <p>.
::after p::after Добавляет элемент с содержимым после содержимого каждого элемента <p>.
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru