Xiper

Селекторы: общие сведения

Автор: Александр Головко и Татьяна Шкабко Дата публикации:

Ты уже знаешь, что CSS состоит из правил, а каждое правило — из селектора и блока объявлений. Блок объявлений содержит CSS-свойства, определяющие отображение элемента веб-страницы в браузере. А селектор отвечает за выбор этого самого элемента. Если в «устройстве» CSS для тебя остались неясные моменты, советую обратиться к статье Анатомия CSS.

Данный цикл статей посвящен селекторам. Ты узнаешь, какие они бывают и как их грамотно применять.

Итак, селектор служит для однозначной идентификации HTML элемента средствами CSS. Механизм селекторов действительно гибкий и мощный. Он позволяет выбирать именно тот элемент (или группу элементов), который нам нужен.

Виды селекторов

Давай на пару минут отвлечемся от CSS и, для наглядности, представим применение селекторов в окружающем нас мире. Мы можем выбирать (селектор показан курсивом):

  • все объекты — это называется универсальный селектор: «Хочу чтобы все жили счастливо!»;
  • объекты определенного типа — селектор типа: «Давай покрасим легковые машины в красный цвет!»;
  • объекты с заданным классом — селектор класса: «Всем рабочим срочно одеть каски!»;
  • объект с определенным идентификатором — селектор идентификатора: «Леночка! Два кофе, пожалуйста!»;
  • объекты с определенными характеристиками — селекторы атрибутов: «я занимал за во-о-он тем дяденькой в шапочке и с красной папкой в руках».

Эти селекторы являются простыми.

Объединяя простые селекторы можно выбирать объекты по более сложным правилам:

  • объекты, находящиеся внутри какого-то объекта — селектор потомка: «Граждане, набившиеся в маршрутку (в том числе и мальчик, спрятавшийся в чемодане) — передаем за проезд!»;
  • объекты, непосредственно вложенные в какой-то объект — дочерний селектор: «Граждане, набившиеся в маршрутку (кроме мальчика, спрятавшегося в чемодане) — передаем за проезд!»;
  • объект, расположенный после другого объекета — сестринский селектор: «Водитель, едущий в тянучке следом за Бентли, научился зевать и чихать не закрывая глаза».

Наконец, существуют селекторы псевдоклассов и псевдоэлементов. Они позволяют назначать стили элементам, которые зависят не только от разметки, но и от состояния документа. Возможно пока это звучит немного запутанно, но не пугайся, сейчас мы все разберем по-порядку.

Итак, задраить люки! Приготовься к погружению в мир CSS-селекторов.

Первая остановка — Универсальный селектор.