CSS-селекторы
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Обратите внимание — не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
Базовые селекторы
Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.
Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
Синтаксис: элемент
Пример: селектор 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 (независимо от его значения).
Ещё пример: a[href$=».jpg»] выберет все ссылки, у которых адрес заканчивается на «.jpg».
Ещё пример: a[href^=»https»] выберет все ссылки, у которых адрес начинается на «https».
Комбинаторы
Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
Синтаксис: A, B
Пример: div, span выберет оба элемента — и и .
Комбинатор ‘ ‘ (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
Синтаксис: A B
Пример: селектор div span выберет все элементы , которые находятся внутри элемента .
Комбинатор ‘>’ в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
Синтаксис: A > B
Комбинатор ‘~’ выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
Синтаксис: A ~ B
Комбинатор ‘+’ выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
Синтаксис: A + B
Пример: селектор h2 + p выберет первый элемент , который находится непосредственно после элемента (en-US).
Псевдо
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример: a:visited соответствует всем элементам которые имеют статус «посещённые».
Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
Знак :: позволяет выбрать вещи, которых нет в HTML.
Пример: p::first-line соответствует первой линии абзаца .
Версии CSS
| Спецификация | Статус | Комментарии |
|---|---|---|
| Selectors Level 4 | Рабочий черновик | Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них. |
| Selectors Level 3 | Рекомендация | Добавлен комбинатор ~ и древовидные структурные псевдоклассы. Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов. |
| CSS Level 2 (Revision 1) | Рекомендация | Добавлен комбинатор потомков > и комбинатор следующего соседа + . Добавлен универсальный (*) комбинатор и селектор атрибутов. |
| CSS Level 1 | Рекомендация | Первоначальное определение. |
Смотрите также
Found a content problem with this page?
This page was last modified on 22 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Что вы не знали о селекторах CSS?
Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и .class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
(Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке.
#id
(Пр. #Block_Form) Этот селектор объедение элементы с В чем скажите разница между .class и #id — а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что — Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным.
element
(Пр. p ) Объединяет все элементы тега p.
element,element
(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:
element element
(Пр. div p) Выбирает все элементы p внутри div.
element>element
(Пр. div>p) Объединяет все p для которых родителем выступает div.
element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div.
[attribute]
(Пр. [target]) Объединяет все элементы с атрибутом target
[attribute=value]
(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»
[attribute~=value]
(Пр. [title~=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»
[attribute|=value]
(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»
Все теги написаны были без «<>«.
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:link
:visited
:active
(Пр. a:active) Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
:hover
:focus
(Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем
:first-letter
:first-line
(Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются
:first-child
(Пр. p:first-child) Что бы просто объяснить — применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса:
:before
:after
(Пр. p:after)
Они применяются в тех случаях, когда — нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:»»;. Также нужно помнить о том, что при добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется.
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1~element2
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.
[attribute^=value]
(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
[class^="test"] item1 item2 item3 item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.
[attribute$=value]
(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:
div[class$="test"] Item1 Item2 Item3 Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.
[attribute*=value]
(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
div[class*="test"] item1 item2 item3 item4