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

Leave a Comment / Css / By /

Содержание

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: , by MDN contributors

CSS селекторы

  • Комбинаторы
  • Псевдо-классы
  • Псевдо-элементы

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

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

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

  • селектор типа
  • универсальный селектор
  • селекторы атрибутов
  • селектор идентификатора
  • селектор класса
  • псевдо-классы
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").		 2
[атрибут~=»значение»] [title~="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» (title="один и два"). 2
[атрибут|=»значение»] [lang|="ru"] Выбор всех элементов с атрибутом lang, значение которого начинается с «ru». =»https»] Выбор каждого элемента <a> с атрибутом href, значение которого начинается с «https». 3
[атрибут$=»значение»] [src$=".png"]
 Выбирает все элементы с атрибутом src, значение которого оканчивается на «.png» (src="some_img.png"). 3
[атрибут*=»значение»] [title*="один"] Выбирает все элементы с атрибутом title, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» (title="один и два"). 3

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


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

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

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

Комбинаторы

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

КомбинаторПримерОписание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

Селекторы | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В прошлых уроках и упражнениях мы использовали достаточно простые селекторы. Они позволяли выбрать элементы, к которым будут применены CSS правила. Вы уже умеете выбирать элемент по его тегу, классу, идентификатору и найти вложенный элемент.

CSS дает намного большие возможности по выбору элементов. В этом уроке мы изучим самые популярные селекторы второго и третьего уровня спецификации W3C. В конце урока будут оставлены ссылки на спецификации, в которых вы сможете узнать и о других селекторах.

Выбор соседнего элемента

Ранее использование селекторов указывало, какой конкретно элемент мы хотим выбрать и где он находится относительно своих родительских блоков. В большинстве случаев этого достаточно для точного указания элемента, но бывают случаи, когда нужно выбрать соседний элемент, а не вложенный. Например,

<section>
  <div>...</div>
  <div>...</div>
</section>

По условию нашей задачи элемент timer полностью зависит от блока time. Предположим, что стиль таймера меняется в зависимости от наличия элемента с классом time. Есть несколько путей решения такой задачи:

  1. Положить оба элемента в единого родителя и дать им уникальные классы для разных ситуаций.
  2. Воспользоваться селектором соседнего элемента.

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

В CSS существует два селектора для выбора элемента, который лежит рядом с другим элементом:

  • A + B — выбор элемента B, который находится непосредственно после элемента A. Такой селектор называется смежным или соседним
  • A ~ B — выбор элемента B, который находится на том же уровне вложенности, что и A. При этом они имеют общего родителя и все элементы B находятся после элемента A в HTML. Такой селектор называется родственным.

Для примера выше отлично подойдет смежный селектор. Элементы time и timer идут друг за другом и являются дочерними элементами одного и того же родителя. Стилизуем элемент timer в зависимости от существования элемента time:

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

<section>
  <h3>...</h3>
  <div>...</div>
  <h4>...</h4>
  <div>...</div>
</section>

Схематически CSS будет выглядеть следующим образом:

.time ~ .timer {
  /* Стили элемента */
}

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

Атрибуты — неизменная часть работы верстальщика и фронтенд-разработчика. Они не всегда несут в себе семантический смысл, как например атрибут alt, title, class, id и так далее.

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

Для стилизации таких элементов в CSS существуют специальные селекторы.

Самый простой селектор по атрибуту просто выбирает элемент по его атрибуту. В CSS атрибут записывается внутри квадратных скобок, это и будет самым простым селектором по атрибуту. Для демонстрации создадим свой атрибут data-full-screen — это будет пользовательский атрибут и вы его не найдете в документациях. Для тренировки можете его назвать совершенно другим образом — смысл действий от этого не изменится:

<section data-full-screen></section>

section[data-full-screen] {
  width: 100vw;
  height: 100vh;
  background: #2196f3;
}

Можно выбирать не только по названию атрибута, но и по его значению. В этом случае рядом с именем атрибута указывается его значение в следующем синтаксисе:

<section data-full-screen="true"></section>

section[data-full-screen="true"] {
  width: 100vw;
  height: 100vh;
  background: #2196f3;
}

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

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

<section data-nm-section="catalog"></section>
<section data-nm-section="catalog-popular"></section>
<section data-nm-section="catalog-new"></section>

Все три секции, по своей логике, будут иметь похожее оформление. Можно добавить всем одинаковый класс, но существует одна проблема: если элементы добавляются динамически, с помощью JS, то есть вероятность существования такого же класса внутри проекта. =»catalog»] { width: 50px; height: 50px; margin-bottom: 10px; background: #2196f3; }

Есть еще несколько похожих конструкций, которые ищут «вхождение» подстроки в строку:

  • [data-nm-section$="catalog"] — вхождение подстроки в конце значения атрибута.

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

СелекторПримерОписание
.class.introВыделяет все элементы с
#id#firstnameВыделяет все элементы с
**Выделяет все элементы
элементpВыделить все элементы <p>
элемент,элементdiv, pВыделить все элементы <div> и <p>
элемент элементdiv pВыделить все элементы <p> внутри элементов <div>
элемент>элементdiv > pВыделить все элементы <p> где родителем является элемент <div>
элемент+элементdiv + pВыделить все элементы <p> которые размещаются сразу после элементов <div>
элемент1~элемент2p ~ ulВыделить каждый элемент <ul> которые размещаются сразу перед элементом <p>
[атрибут][target]Выделяет все элементы с атрибутом target
[атрибут=значение][target=_blank]Выделяет все элементы с target=»_blank»
[атрибут~=значение][title~=flower]Выделяет все элементы с атрибутом title, содержащие слово «flower»
[атрибут|=значение][lang|=en]Выделяет все элементы со значением атрибута lang, начиная с «en»
[атрибут^=значение]a[href^=»https»]Выбирает каждый элемент <a>, значение атрибута href который начинается с «https»
[attribute$=значение]a[href$=». pdf»]Выбирает каждый элемент <a>, значение атрибута href который заканчивается на «.pdf»
[атрибут*=значение]a[href*=»schoolsw3″]Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку «schoolsw3»
:activea:activeВыбор активной ссылки
::afterp::afterВставляет что-нибудь после содержимого каждого элемента <p>
::beforep::beforeВставить что-то перед содержимым каждого элемента <р>
:checkedinput:checkedВыбирает каждый проверенный элемент <input>
:disabledinput:disabledВыбрать каждый отключенный элемент lt;input>
:emptyp:emptyВыбирает каждый элемент <p>, у которого нет дочерних элементов (включая текстовые узлы)
:enabledinput:enabledВыбирает каждый включенный элемент <input>
:first-childp:first-childВыбирает каждый элемент <p>, который является первым дочерним элементом родительского элемента
::first-letterp::first-letterВыбирает первую букву каждого элемента <p>
::first-linep::first-lineВыбирает первую строку каждого элемента <p>
:first-of-typep:first-of-typeВыбирает каждый элемент <p>, который является первым элементом <p> своего родителя
:focusinput:focusВыбирает элемент ввода, имеющего фокус
:hovera:hoverВыделяет ссылки при наведении курсора мыши
:in-rangeinput:in-rangeВыделяет входные элементы со значением в заданном диапазоне
:invalidinput:invalidВыбирает все входные элементы с недопустимым значением
:lang(language)p:lang(it)Выбирает каждый элемент <p> с атрибутом lang, равным «it» (итальянский)
:last-childp:last-childВыбирает каждый элемент <p>, который является последним дочерним элементом родительского элемента
:last-of-typep:last-of-typeВыбирает каждый элемент <p>, который является последним элементом <p> своего родителя
:linka:linkВыделяет все непосещенные ссылки
:not(selector):not(p)Выбирает каждый элемент, который не является элементом <p>
:nth-child(n)p:nth-child(2)Выбирает каждый элемент <p>, который является вторым дочерним элементом родительского элемента
:nth-last-child(n)p:nth-last-child(2)Выбирает каждый элемент <p>, который является вторым дочерним элементом родительского элемента, считая от последнего дочернего элемента
:nth-last-of-type(n)p:nth-last-of-type(2)Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя, считая от последнего потомка
:nth-of-type(n)p:nth-of-type(2)Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя
:only-of-typep:only-of-typeВыбирает каждый элемент <p>, который является единственным элементом <p> родительского элемента
:only-childp:only-childВыбирает каждый элемент <p>, который является единственным дочерним элементом родительского элемента
:optionalinput:optionalВыбирает элементы ввода без атрибута «required»
:out-of-rangeinput:out-of-rangeВыбирает входные элементы со значением вне указанного диапазона
:read-onlyinput:read-onlyВыбирает входные элементы с указанным атрибутом «readonly»
:read-writeinput:read-writeВыбирает входные элементы с не указанным атрибутом «readonly»
:requiredinput:requiredВыбирает входные элементы с указанным атрибутом «required»
:root:rootВыбирает корневой элемент документа
::selection::selectionВыделяет часть элемента, выбранную пользователем
:target#news:targetВыбирает текущий активный элемент #news (при щелчке по URL, содержащему имя привязки)
:validinput:validВыбирает все входные элементы с допустимым значением
:visiteda:visitedВыбирает все посещенные ссылки

    • Спецификация
    Селекторы уровня 4