CSS селекторы

Цикл статей «CSS учебник».

Следующая статья — «CSS цвет».
Предыдущая статья — «Синтаксис CSS».

С помощью селекторов можно выбирать элементы, к которым будут применены правила оформления на странице.

Селекторы тегов в CSS

Можно выбрать элементы на странице по названию тега.

Пример 1:

В этом примере все абзацы будут иметь серый фон. Посмотреть результат.

Пример 2:

Здесь элемент <div>  будет иметь серый фон. Посмотреть результат.

Селекторы классов в CSS

С помощью этого виде селекторов можно указать группу элементов, к которым будет применено CSS-правило. Сначала нужно добавить атрибут class="<имя_нашего_класса>"  к тем элементам, к которым нужно применить оформление. Если у элемента несколько классов, то их нужно перечислять через пробел. Затем в качестве селектора использовать это имя с предваряющей его точкой: .<имя_нашего_класса>. Можно также перед точкой указать тег, и правило будет применено к указанным тегам с классом.

Пример:

Посмотреть результат.

Селекторы идентификаторов в CSS

Можно указывать правила для элементов с конкретным id. Для этого в качестве  селектора используется id элемента с предваряющим его символом решётки: #myelid. Можно указывать не только id, но и тег перед решёткой: p#myelid1. Но учитывая, что элементов с одинаковыми id на странице быть не должно, то указание тега вряд ли имеет смысл.

Пример:

Посмотреть результат.

Селекторы атрибутов в CSS

Можно применять правила к элементам, имеющим определённый атрибут или определённое значение в атрибуте.

[<атрибут>]  — селектор элементов с указанным атрибутом.

[<атрибут>=<значение>] — селектор элементов с указанным значением атрибута.

<селектор>[<атрибут>]  — селектор элементов с указанным селектором и указанным атрибутом.

<селектор>[<атрибут>=<значение>]  — селектор элементов с указанным селектором и указанным значением атрибута.

Пример:

Посмотреть результат.

Комбинирование селекторов

Можно создавать селекторы для элементов, находящихся внутри других элементов или являющихся дочерними к элементами. Также можно создавать селекторы для соседних элементов.

Селектор для тега <p>, находящегося внутри тега <div>:

Приведённое выше правило будет работать не только для элементов <p>, вложенных напрямую в <div>, но и для элементов <p>, вложенных в какой-нибудь элемент, являющийся вложенным в элемент <div>. Иерархия может быть многоуровневой.

Если нужно создать правило для строго дочернего элемента, то селекторы комбинируются с помощью символа «>»:

Можно создать правило для тега, следующего за другим тегом:

Можно создавать более сложные правила вроде:

Пример:

Посмотреть результат.

В этой статье описаны только наиболее часто встречаемые виды селекторов. На самом деле их много больше. Вы можете найти про них в интернете, если столкнётесь с ними в реальной жизни. Я же пытаюсь создать простой и краткий учебник для быстрого старта.

Цикл статей «CSS учебник».

Следующая статья — «CSS цвет».
Предыдущая статья — «Синтаксис CSS».

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *