Справочник верстальщика

Селекторы

Нужно сначала сказать, что селектор служит, для того что бы однозначно определить элемент в html документе, к которому необходимо применить тот или другой стиль CSS Существуют следующие типы селекторов:

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы. Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде:

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение.

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий:

К любому тегу можно одновременно добавить несколько классов, перечисляя их в значении атрибута class через пробел, такая форма называется мультиклассы. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берется значение у класса, который описан в коде ниже.

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Синтаксис применения идентификатора следующий.

При описании идентификатора вначале указывается символ решетки (#), затем идет имя идентификатора. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве атрибута тега используется id, значением которого выступает имя идентификатора. Символ решетки при этом уже не указывается.