[6 урок] Селекторы CSS
В CSS - селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
Что такое селекторы?
Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.
В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.
Несколько селекторов
Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:
А могу написать короче — просто отделив селекторы запятыми:
Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.
При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.
В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.
Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.
Типы селекторов
Понимание того, какой именно селектор Вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виду селекторов.
Селекторы тегов, классов и идентификаторов
К этой группе относятся селекторы HTML-элементов, таких как <h1>.
К группе относятся и селекторы классов:
или селекторы идентификаторов (ID):
Селекторы атрибутов
Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:
или основываясь на значении атрибута:
Псевдоклассы, псевдоэлементы
К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши
К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.
Комбинаторы
И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):
Все CSS-селекторы
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.
Базовые селекторы
Универсальный селектор
Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, * .warning и .warning считаются равными.
В CSS 3, звездочка (*) может использоваться в комбинации с пространством имён
ns|*- вхождения всех элементов в пространстве имён ns*|*- находит все элементы|*- ищет все элементы без объявленного пространства имён
Пример
Селекторы по типу элемента
CSS селекторы по типу выбирают элементы по имени узла. Используются отдельно, поэтому, селектор типа для конкретного имени тега выбирает все элементы этого типа, то есть с этим именем узла в документе.
Синтаксис
Пример
Селекторы по классу
В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.
Синтаксис
Пример
Селекторы по идентификатору
В HTML-документах CSS-селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.
Синтаксис
Пример
Селекторы по атрибуту
Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.
1. [attr] - Обозначает элемент с атрибутом по имени attr.
2. [attr=value] - Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
3. [attr~=value] - Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
4. [attr|=value] - Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.
5. [attr^=value] - Обозначает элемент с именем атрибута attr значение которого начинается с "value"
6. [attr$=value] - Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"
7. [attr*=value] - Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.
Пример
Комбинаторы
Комбинатор потомков
Комбинатор ␣ (пробел) представляет собой 2 или более селекторов, найдет элементы соответвующие обоим селекторам. Селекторы по потомкам похожи на селекторы дочерних элементов, но они не учитывают вложенность элементов и пременяют свои свойства ко всем элемнтам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.
Синтаксис
Пример
Дочерние селекторы
Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.
Синтаксис
Пример
Комбинатор всех соседних элементов
Общий комбинатор смежных селекторов (~) разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.
Синтаксис
Пример
Комбинатор следующего соседнего элемента
Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.
Синтаксис
Пример
Псевдо
Псевдоклассы
Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё.
Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).
Синтаксис
Псевдоэлементы
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.
Синтаксис
В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.