Выберите селектор с помощью которого браузер найдет все родственные элементы

Обновлено: 07.01.2025

Селекторы являются одним из наиболее важных аспектов CSS, так как они позволяют вам выбирать определенные элементы на веб-странице различными способами, чтобы их можно было стилизовать.

В CSS доступно несколько типов селекторов, давайте рассмотрим их подробнее:

Универсальный селектор

Универсальный селектор, обозначенный звездочкой ( * ), выбирает все элементы на странице.

Универсальный селектор может быть опущен, если для элемента применяется класс ( class ). Этот селектор часто используется для удаления полей ( margin ) по умолчанию или созданию отступов ( padding ) для быстрого тестирования.

Давайте рассмотрим следующий пример, чтобы понять, как это в основном работает:

Правила стиля внутри селектора * будут применяться ко всем элементам в документе.

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

Селекторы типов элементов

Селектор типа элемента соответствует всем выбранным элементам в документе с соответствующим именем типа элемента. Давайте рассмотрим пример, чтобы увидеть, как это работает:

Правила для селектора p будут применяться ко всем элементам <p> (абзацам) в документе и окрашивать их в синий цвет, независимо от их положения в дереве документа.

Id Селекторы

Селектор идентификатора ( id ) используются для определения стилей для одного уникального элемента на странице.

Это правило отображает текст элемента красным цветом, для тега, атрибут id которого имеет значение error .

Class Селекторы

Селекторы класса могут использоваться для выбора группы HTML-элементов, которые имеют одинаковый класс. Все элементы, имеющие этот класс, будут отформатированы в соответствии с заданным правилом.

Селектор класса определяется знаком точки ( . ), за которым сразу следует значение класса.

Приведенные выше правила стиля отображают текст синим цветом для всех элементов в документе, у которых атрибут class установлен blue . Вместе с классом вы можете указывать и тип элемента, для того, чтобы сделать правило более конкретным. Например:

Правило стиля внутри селектора p.blue отображает текст синим цветом только тех элементов <p> , у которых атрибут class установлен blue , и не влияет на другие абзацы, не имеющие этого класса.

Селекторы с потомками

Вы можете использовать эти селекторы, когда вам нужно выбрать элемент, который является потомком другого элемента. Например, если вы хотите выбрать только те ссылки <a> , которые содержатся в неупорядоченном списке <ul> , как показано в примере:

Правила внутри селектора ul.menu li a применяются только к элементам <a> , которые содержатся внутри элемента <ul> , имеющего класс .menu , и не влияют на другие ссылки внутри документа. Свойство text-decoration: none отменяет подчеркивание у ссылок.

Аналогично, правила стиля внутри селектора h1 em будут применяться только к тем элементам <em> , которые содержатся внутри элементов <h1> и не влияют на другие элементы.

Дочерние селекторы

Дочерние селекторы используются для выбора только тех элементов, которые являются прямыми потомками указанного элемента.

Правило внутри селектора ul > li применяется только к тем элементам <li> , которые являются прямыми потомками элементов <ul> и не влияют на другие элементы списка.

Смежные селекторы

Смежные селекторы могут быть использованы для выбора родственных элементов (то есть элементов находящихся на одном уровне в дереве документа). Этот селектор имеет синтаксис: element-1 + element-2 , где element-2 является целью селектора.

Селектор h1 + p в следующем примере выберет элемент <p> только в том случае, если оба элемента <h1> и <p> имеют одного и того же родителя в дереве документа, и <h1> находится непосредственно перед элементом <p> . Это означает, что только для абзаца, который идет сразу после каждого заголовка <h1> , будет изменен цвет и размер шрифта.

Общие смежные селекторы

Общий смежный селектор похож на предыдущий ( element-1 + element-2 ), но он менее строг. Он так же состоит из двух простых селекторов, но разделенных символом тильды ( ∼ ). Запись может иметь вид: element-1

element-2 , где element-2 является целью селектора.

Селектор h1 ∼ p в приведенном ниже примере выберет все элементы <p> , которым предшествует элемент <h1> , где все элементы имеют одного и того же родителя в дереве документа.

По сути, ∼ отличается от + , тем, что

выберет все <p> после <h1> , а + выберет только первый элемент <p> .

Есть более сложные селекторы, такие как селекторы атрибутов, псевдоклассы, псевдоэлементы. Мы подробно обсудим эти селекторы в следующих главах.

Группировка селекторов

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

Как вы можете заметить в приведенном выше примере, то же правило стиля font-weight: normal; используется селекторами h1 , h2 и h3 , поэтому его можно сгруппировать в список через запятую, например так:

Руководство по свойству opacity в CSS

Руководство по таблицам в CSS

Руководство по свойству margin в CSS

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 4 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

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

Здесь красный цвет текста будет установлен для всех абзацев.

Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h1> и <p> не имеют общего родителя.

Синтаксис

Для управления стилем родственных элементов используется символ тильды (

), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует после него.

Обозначения

Пример

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

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor's draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Давайте на простом примере разберём работу этого селектора:

В этом примере родственный селектор h1

p сработал на все теги <p> , следующие за тегом <h1> .

Теперь другой пример использования родственных селекторов:

Тут видно, что стиль сработает только для тегов <p> , которые являются потомками тега <div> , то есть для абзаца №1 и №2.

То есть родственные элементы должны иметь общего родителя и находиться на одном уровне.

Родственные селекторы похожи на соседние селекторы, но отличаются тем, что стиль применяется ко всем выбраным элементам, а не только к первому из них.

Pодственный селектор и псевдокласс :hover

Теперь давайте используем этот селектор в паре с псевдоклассом :hover , который отвечает за стиль элемента, на который наведен курсор.

Результат будет таким:

Рисунок 1. Родственные селекторы и :hover.

Более реальный и сложный пример

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

Давайте рассмотрим код формы, в которой при активации поля формы появляется подсказка. Вот так она выглядит:

Рисунок 2. Поле формы с подсказкой.

Если поместить курсор в поле "Имя пользователя", то появится одна подсказка, если в поле "Пароль", то другая.

Для определения стиля появляющегося блока тут использован селектор input:focus

div . Он значит следующее: когда поле формы input получает фокус, всем родственным тегам div применить стиль: display : block , то есть они становятся видимыми. До этого они имели свойство display : none , то есть были невидимы.

Сама подсказка состоит из трёх блоков div :

в одном блоке хранится текст подсказки, он обведён рамкой с закруглёнными углами;
треугольник, блок с нолевой высотой и шириной, а также рамками border , которые рисуют треугольник;
ешё один треугольник, но белого цвета и смещён на 1px в право (этот треугольник закрашивает предыдущий, оставляя лишь боковую линию в 1 px).

Также для понимания работы этого примера нужно знать позиционирование, свойство position .

В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.

Соседние селекторы

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

Пример: допустим, вам необходимо, чтобы каждый абзац <p> , который идет первым после заголовка <h1> , имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN <> (стиль применяется к selectorN ).

Родственные селекторы

Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда

Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев <p> , которые идут после заголовка <h1> . Код CSS будет выглядеть так:

Взгляните на HTML-код: стиль применится ко всем тегам <p> , которые следуют после тега <h1> и находятся до закрывающего тега родителя <div> . В нашем варианте насчитывается 3 элемента <p> , к которым применится стиль. Обратите внимание, что тег <h2> этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу <p> , который находится над <h1> , а также к тегу <p> , имеющему другого родителя <div> .

Выводы

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

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

Читайте также: