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».
=»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Пример: селектор
h3 + pвыберет первый элемент<p>, который находится непосредственно после элемента<h3>(en-US).
- Псевдоклассы
Знак
:позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.Пример:
a:visitedсоответствует всем элементам<a>которые имеют статус «посещённые».Ещё пример:
div:hoverсоответствует элементу, над которым проходит указатель мыши.Ещё пример:
input:focusсоответствует полю ввода, которое получило фокус.- Псевдоэлементы
Знак
::позволяет выбрать вещи, которых нет в HTML.Пример:
p::first-lineсоответствует первой линии абзаца<p>.
| Спецификация | Статус | Комментарии |
|---|---|---|
| Selectors Level 4 | Рабочий черновик | Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них. |
| Selectors Level 3 | Рекомендация | Добавлен комбинатор ~ и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов. |
| CSS Level 2 (Revision 1) | Рекомендация | Добавлен комбинатор потомков > и комбинатор следующего соседа + . Добавлен универсальный (*) комбинатор и селектор атрибутов. |
| CSS Level 1 | Рекомендация | Первоначальное определение. |
CSS специфичность
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on 
=»#»] {background-color:gold}
/* Все ссылки с url заканчивающимся на .cn будут красными */
a[href$=».cn»] {color: red;}
/* Все ссылки содержащие «example» в url будут иметь серый фон */
a[href*=»example»] {background-color: #CCCCCC;}
<div>
<a href="http://example.com">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div>
<a href="#portuguese">Portuguese:</a>
<span lang="pt">Olá Mundo!</span>
</div>
<div>
<a href="http://example.cn">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好！</span>
</div>
<div>
<a href="http://example.cn">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好！</span>
</div>
| Specification |
|---|
| Selectors Level 4 # attribute-selectors |
BCD tables only load in the browser with JavaScript enabled.
Enable JavaScript to view data.
- CSS селекторы: базовая поддержка браузерами
- Совместимость с браузерами селекторов и псевдо-селекторов CSS
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
This page was last modified on by MDN contributors.
Справочник по селекторам CSS
❮ Предыдущий Далее ❯
В CSS селекторы — это шаблоны, используемые для выбора элементов, для которых требуется стиль.
Воспользуйтесь нашим тестером селекторов CSS, чтобы продемонстрировать различные селекторы.
| Селектор | Пример | Пример описания | |
|---|---|---|---|
| . класс | . intro | Выбирает все элементы с | |
| .класс1.класс2 | .имя1.имя2 | Выбирает все элементы с набором name1 и name2 в своем атрибуте класса | |
| .класс1 .класс2 | .имя1 .имя2 | Выбирает все элементы с name2 , которые являются потомками элемент с именем 1 | |
| # идентификатор | #имя | Выбирает элемент с | |
| * | * | Выбирает все элементы | |
| элемент | р | Выбирает все элементы | |
| элемент.класс | стр. вступление | Выбирает все элементы с | |
| элемент,элемент | дел, стр | Выбирает все элементы и все элементы | |
| элемент элемент | раздел стр | Выбирает все элементы внутри элементов | |
| элемент > элемент | дел > р | Выбирает все элементы , родительским элементом которых является элемент | |
| элемент + элемент | дел + р | Выбирает первый элемент , который помещается сразу после элементов | |
| Элемент1 ~ Элемент2 | р ~ ул | Выбирает каждый элемент
| |
| [ атрибут ] | [цель] | Выбирает все элементы с целевым атрибутом | |
| [ атрибут = значение ] | [цель = «_blank»] | Выбирает все элементы с target=»_blank» 9=»https»] | Выбирает каждый элемент , значение атрибута href которого начинается с «https» |
| [ атрибут $= значение ] | а[href$=». pdf»] | Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf» | |
| [ атрибут *= значение ] | а[href*=»w3schools»] | Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools» | |
| :активный | а:активный | Выбирает активную ссылку | |
| ::после | р::после | Вставьте что-нибудь после содержимого каждого элемента | |
| ::до | р::до | Вставьте что-нибудь перед содержимым каждого элемента | |
| : проверено | ввод:проверено | Выбирает каждый проверенный элемент | |
| : по умолчанию | ввод: по умолчанию | Выбирает элемент по умолчанию | |
| : отключено | ввод: отключен | Выбирает каждый отключенный элемент | |
| :пусто | р:пусто | Выбирает каждый элемент , у которого нет дочерних элементов (включая текстовые узлы) | |
| :включено | ввод: включен | Выбирает каждый включенный элемент | |
| :первый ребенок | p: первый ребенок | Выбирает каждый элемент , который является первым дочерним элементом своего родителя. | |
| :: первая буква | p:: первая буква | Выбирает первую букву каждого элемента | |
| :: первая линия | p::первая строка | Выбирает первую строку каждого элемента | |
| : первый в своем роде | p: первый в своем роде | Выбирает каждый элемент , который является первым элементом своего родителя. | |
| :фокус | ввод:фокус | Выбирает элемент ввода, который имеет фокус | |
| : полноэкранный режим | :полноэкранный | Выбирает элемент, находящийся в полноэкранном режиме | |
| :наведение | а: наведите курсор на | Выбирает ссылки при наведении мыши | |
| :в диапазоне | ввод: в диапазоне | Выбирает элементы ввода со значением в указанном диапазоне | |
| :неопределенный | ввод: неопределенный | Выбирает элементы ввода, которые находятся в неопределенном состоянии | |
| : неверный | ввод: неверный | Выбирает все элементы ввода с недопустимым значением | |
| :язык( язык ) | p:язык(ит) | Выбирает каждый элемент с атрибутом lang, равным «it» (итальянский) | |
| :последний ребенок | p:последний ребенок | Выбирает каждый элемент , который является последним дочерним элементом своего родителя. | |
| :последний тип | p:последний тип | Выбирает каждый элемент , который является последним элементом своего родителя | |
| :ссылка | а: ссылка | Выбирает все непросмотренные ссылки | |
| :: маркер | :: маркер | Выбирает маркеры элементов списка | |
| :нет( селектор ) | :не(р) | Выбирает каждый элемент, который не является элементом | |
| :n-й ребенок( n ) | p:n-й ребенок(2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родителя | |
| :n-последний-потомок( n ) | p:n-последний-потомок(2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента | |
| :n-последний тип( n ) | p:n-последний тип(2) | Выбирает каждый элемент , который является вторым элементом своего родителя, считая от последнего дочернего элемента | |
| :n-й тип( n ) | p:n-й тип(2) | Выбирает каждый элемент , который является вторым элементом своего родителя. | |
| :только тип | p: только тип | Выбирает каждый элемент , который является единственным элементом своего родителя. | |
| : единственный ребенок | p: единственный ребенок | Выбирает каждый элемент , который является единственным потомком своего родителя. | |
| : необязательный | ввод: опционально | Выбирает элементы ввода без обязательного атрибута | |
| :вне диапазона | ввод: вне диапазона | Выбирает элементы ввода со значением вне указанного диапазона | |
| ::заполнитель | ввод:: заполнитель | Выбирает элементы ввода с указанным атрибутом «placeholder» | |
| : только для чтения | ввод: только для чтения | Выбирает элементы ввода с указанным атрибутом «только для чтения» | |
| : чтение-запись | ввод: чтение-запись | Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения» | |
| : требуется | ввод: требуется | Выбирает элементы ввода с указанным атрибутом «обязательный» | |
| : корень | : корень | Выбирает корневой элемент документа | |
| ::выбор | ::выбор | Выбирает часть элемента, выбранную пользователем | |
| : цель | #новости:цель | Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки) | |
| : действительный | ввод: действительный | Выбирает все элементы ввода с допустимым значением | |
| :посетили | а: посетил | Выбирает все посещенные ссылки |
❮ Предыдущий Следующий ❯
НАБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900 050581
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top1 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Справочник по функциям CSS
❮ Предыдущий Далее ❯
Функции CSS используются в качестве значений для различных свойств CSS.
| Функция | Описание |
|---|---|
| атрибут() | Возвращает значение атрибута выбранного элемента |
| расчет() | Позволяет выполнять вычисления для определения значений свойств CSS |
| конический градиент() | Создает конический градиент |
| счетчик() | Возвращает текущее значение именованного счетчика |
| кубический Безье() | Определяет кубическую кривую Безье |
| hsl() | Определяет цвета с помощью модели Hue-Saturation-Lightness (HSL) |
| хсла() | Определяет цвета с использованием модели Hue-Saturation-Lightness-Alpha (HSLA) |
| линейный градиент() | Создает линейный градиент |
| макс() | Использует наибольшее значение из списка значений, разделенных запятыми, в качестве значение свойства |
| мин() | Использует наименьшее значение из списка значений, разделенных запятыми, в качестве значение свойства |
| радиальный градиент() | Создает радиальный градиент |
| повторяющийся конический градиент() | Повторяет конический градиент |
| повторяющийся линейный градиент() | Повторяет линейный градиент |
| повторяющийся радиальный градиент() | Повторяет радиальный градиент |
| RGB() | Определяет цвета с использованием красно-зелено-синей модели (RGB) |
| rgba() | Определяет цвета с помощью красно-зелено-сине-альфа-модели (RGBA) |
| переменная() | Вставляет значение пользовательского свойства |
❮ Предыдущий Следующий ❯
НАБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900 050581
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top1 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.