Селекторы: общие сведения
Ты уже знаешь, что CSS состоит из правил, а каждое правило — из селектора и блока объявлений. Блок объявлений содержит CSS-свойства, определяющие отображение элемента веб-страницы в браузере. А селектор отвечает за выбор этого самого элемента. Если в «устройстве» CSS для тебя остались неясные моменты, советую обратиться к статье Анатомия CSS.
Данный цикл статей посвящен селекторам. Ты узнаешь, какие они бывают и как их грамотно применять.
Итак, селектор служит для однозначной идентификации HTML элемента средствами CSS. Механизм селекторов действительно гибкий и мощный. Он позволяет выбирать именно тот элемент (или группу элементов), который нам нужен.
Виды селекторов
Давай на пару минут отвлечемся от CSS и, для наглядности, представим применение селекторов в окружающем нас мире. Мы можем выбирать (селектор показан курсивом):
- все объекты — это называется универсальный селектор: «Хочу чтобы все жили счастливо!»;
- объекты определенного типа — селектор типа: «Давай покрасим легковые машины в красный цвет!»;
- объекты с заданным классом — селектор класса: «Всем рабочим срочно одеть каски!»;
- объект с определенным идентификатором — селектор идентификатора: «Леночка! Два кофе, пожалуйста!»;
- объекты с определенными характеристиками — селекторы атрибутов: «я занимал за во-о-он тем дяденькой в шапочке и с красной папкой в руках».
Эти селекторы являются простыми.
Объединяя простые селекторы можно выбирать объекты по более сложным правилам:
- объекты, находящиеся внутри какого-то объекта — селектор потомка: «Граждане, набившиеся в маршрутку (в том числе и мальчик, спрятавшийся в чемодане) — передаем за проезд!»;
- объекты, непосредственно вложенные в какой-то объект — дочерний селектор: «Граждане, набившиеся в маршрутку (кроме мальчика, спрятавшегося в чемодане) — передаем за проезд!»;
- объект, расположенный после другого объекета — сестринский селектор: «Водитель, едущий в тянучке следом за Бентли, научился зевать и чихать не закрывая глаза».
Наконец, существуют селекторы псевдоклассов и псевдоэлементов. Они позволяют назначать стили элементам, которые зависят не только от разметки, но и от состояния документа. Возможно пока это звучит немного запутанно, но не пугайся, сейчас мы все разберем по-порядку.
Итак, задраить люки! Приготовься к погружению в мир CSS-селекторов.
Первая остановка — Универсальный селектор.