Содержание

CSS-селекторы — CSS | MDN

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

Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Универсальный селектор

Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён. Синтаксис: * ns|* *|* Пример: * будет соответствовать всем элементам на странице.

Селекторы по типу элемента

Этот базовый селектор выбирает тип элементов, к которым будет применяться правило. Синтаксис: элемент Пример: селектор** **input выберет все элементы <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 (независимо от его значения). =»https»] выберет все ссылки, у которых адрес начинается на «https».

Комбинатор запятая

Комбинатор , это способ группировки, он выбирает все совпадающие узлы. Синтаксис: A, B Пример: div, span выберет оба элемента — и <div> и <span>.

Комбинатор потомков

Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности). Синтаксис: A B Пример: селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>.

Дочерние селекторы

Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу. Синтаксис: A > B Пример: селектор** **ul > li выберет только дочерние элементы <li>, которые находятся внутри, на первом уровне вложенности по отношению к элементу <ul>.

Комбинатор всех соседних элементов

Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем. Синтаксис: A ~ B Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель. Синтаксис: A + B Пример: селектор ul + li выберет любой <li> элемент, который находится непосредственно после элемента <ul>.

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

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов. Пример:

a:visited соответствует всем элементам <a> которые имеют статус «посещённые». Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши. Ещё пример: input:focus соответствует полю ввода, которое получило фокус.

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

Знак :: позволяет выбрать вещи, которых нет в HTML. Пример: p::first-line соответствует первой линии абзаца <p>.

CSS специфичность

Last modified:

14 авг. 2022 г., by MDN contributors

Способы задавать CSS-стили для HTML-элементов


CSS селекторПримерОписаниеCSS
. class .myClass Выбирает все элементы с классом myClass (class="myClass"). 1
#id #main Выбирает элемент с идентификатором main (id="main"). 1
* * Выбор всех элементов. 2
элемент span Выбор всех элементов
<span>
.
1
элемент,элемент div,span Выбор всех элементов <div> и всех элементов <span>. 1
[атрибут] [title] Выбирает все элементы с атрибутом title. 2
[атрибут=»значение»] [title="cost"] Выбирает все элементы с атрибутом title, значение которого в точности совпадает со значением указанным в селекторе (
title="cost"
). =»https»]
Выбор каждого элемента <a> с атрибутом href, значение которого начинается с «https». 3
[атрибут$=»значение»] [src$=".png"] Выбирает все элементы с атрибутом src, значение которого оканчивается на «.png» (src="some_img.png"). 3
[атрибут*=»значение»] [title*="один"] Выбирает все элементы с атрибутом
title
, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» (title="один и два").
3

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

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

Псевдо-элементПримерОписаниеCSS
::first-letter p::first-letter Выбор первой буквы каждого элемента <p>. 1
::first-line p::first-line Выбор первой строки каждого элемента <p>. 1
::before p::before Добавляет элемент с содержимым перед содержимым каждого элемента <p>. 2
::after p::after Добавляет элемент с содержимым после содержимого каждого элемента <p>. 2

Предпосылки: Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами, основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучите Первые шаги CSS. )
Цель: Чтобы узнать о различных селекторах-комбинаторах, которые можно использовать в CSS.