CSS-селекторы

Модуль CSS-селекторов определяет шаблоны для выбора элементов, к которым затем применяются правила CSS, вместе со своей specificity. Модуль CSS-селекторов предоставляет более 60 селекторов и пять комбинаторов. Другие модули предоставляют дополнительные псевдоклассы и псевдоэлементы.

В CSS селекторы — это шаблоны, используемые для сопоставления или выбора элементов, которые вы хотите стилизовать. Селекторы также используются в JavaScript для выбора узлов DOM, которые возвращаются как NodeList.

Селекторы, независимо от того, используются ли они в CSS или JavaScript, позволяют нацеливаться на HTML-элементы на основе их типа, атрибутов, текущего состояния и даже позиции в DOM. Комбинаторы позволяют быть более точными при выборе элементов, позволяя выбирать элементы на основе их отношения к другим элементам.

Справочник

Комбинаторы и разделители

Селекторы

:active
:any-link
:autofill
:blank
:buffering
:checked
:current
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:local-link
:matches() (устаревший псевдоселектор-алиас для :is())
:modal
:muted
:not()
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:paused
:picture-in-picture
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:scope
:seeking
:stalled
:target
:target-within
:user-invalid
:user-valid
:valid
:visited
:volume-locked
:where()
:-webkit- псевдоклассы
Селекторы атрибутов
Селектор класса
Селекторы ID
Селекторы типов
Универсальные селекторы

Термины

Руководства

CSS-селекторы и комбинаторы: Обзор различных типов простых селекторов и различных комбинаторов, определённых в модулях CSS-селекторов и CSS-псевдоклассов.
Структура CSS-селекторов: Объяснение структуры CSS-селекторов и терминологии, введённой в модуле CSS-селекторов, от «простого селектора» до «либерального списка относительных селекторов».
Псевдоклассы: Список псевдоклассов, селекторов, которые позволяют выбирать элементы на основе информации о состоянии, которая не содержится в дереве документа, определённых в различных модулях CSS и HTML.
Урок: CSS-селекторы: Часть учебника по основам CSS, включает учебные материалы по селекторам типов, классов и ID, селекторам атрибутов, псевдоклассам и псевдоэлементам, комбинаторам, каскаду, специфичности и наследованию и слоям каскада.
Использование псевдокласса :target в селекторах: Узнайте, как использовать псевдокласс :target для стилизации целевого элемента идентификатора фрагмента URL.
Урок: Псевдоклассы пользовательского интерфейса: Изучите различные псевдоклассы пользовательского интерфейса, доступные для стилизации форм в различных состояниях.
Поиск элементов DOM с помощью селекторов: API селекторов позволяет использовать селекторы в JavaScript для извлечения узлов элементов из DOM.

END_OF_DOCUMENT_MARKER

Связанные понятия

:popover-open псевдокласс
state() псевдокласс
Модуль вложенности CSS
- & вложенный селектор
Модуль области действия CSS
- :host псевдокласс
- :host() псевдокласс
- :host-context() псевдокласс
- ::slotted псевдоэлемент
Модуль псевдоэлементов CSS (представляющие сущности, не включённые в HTML)
Модуль частей теней CSS
- ::part псевдоэлемент
Модуль позиционированного макета CSS
- ::backdrop
Другие псевдоэлементы
- ::cue
@namespace директива
!important
Специфичность
Каскад
Document.querySelector метод
Document.querySelectorAll метод
NodeList.forEach() метод

Спецификации

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

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors