Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.
Необходимые условия:
Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:
Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.
Комбинатор потомка
Селектор потомка — обычно представляется символом пробела (» «) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.
Дочерний комбинатор
Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы , которые являются дочерними элементами , селектор пишется так:
css
Соседний родственный комбинатор
Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы , которые идут сразу после элементов :
css
Общий родственный комбинатор
Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы , которые находятся в любом месте после элементов , надо указать так:
css
Использование комбинаторов
Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками , можно использовать следующую комбинацию:
css
ul > li[class="a"] >
Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.
Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.
Проверьте ваши навыки!
Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.
Двигаемся дальше
Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.
В этом модуле
Каскад и наследование
Селекторы CSS
Селекторы типа, класса и ID
Селекторы атрибута
Псевдоклассы и псевдоэлементы
Комбинаторы
Модель коробки
Фон и границы
Обработка разных направлений текста
Переполнение содержимого
Значения и единицы измерения
Изменение размеров в CSS
Элементы изображений, форм и медиа-элементы
Стилизация таблиц
Отладка CSS
Организация вашей CSS
Found a content problem with this page?
This page was last modified on 26 июл. 2023 г. by MDN contributors.
Разные селекторы можно комбинировать между собой, что в итоге позволяет нам сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга.
Группирование селекторов (А, B)
Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 1. Стиль для каждого селектора
Из данного примера видно, что стиль для элементов , , содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.
Пример 2. Сгруппированные селекторы
В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка, пункты которого разделяются между собой запятыми. В группу могут входить не только селекторы элементов, но также идентификаторы и классы.
Здесь свойство background применяется одновременно к элементу и к классам block и msg .
Дерево документа
Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.
Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.
не считается элементом, поэтому его в расчёт не берём. Сама схема начинается с элемента , он называется «корневой элемент». Все элементы связаны друг с другом сверху вниз и между ними есть следующие связи.
, поскольку располагается внутри них. Родитель Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. будет родителем для
, но уже не для
, для него родителем будет выступать
. Ребёнок (дочерний элемент) Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для будет элемент
; для
дочерними элементами выступают
, но не . У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель. Братья (сиблинги) Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы , и , а также
. Элементы братскими не являются из-за того, что у них разные родители. Смежные Братские элементы, расположенные рядом друг с другом. Смежными будут элементы и , а также и , но никак не и , потому что они располагаются «через одного».
Селекторы потомка (A B)
Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.
Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a , а для ссылок внизу — footer a .
Рис. 2. Ссылки разного цвета
Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.
Дочерние селекторы (A > B)
Селекторы потомка выбирают всех заданных потомков указанного элемента, независимо от их уровня вложенности. Чтобы выбрать только дочерние элементы, между селекторами вставляется угловая скобка.
Данная запись означает применить стиль к элементу , который является дочерним по отношению к . Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок , поскольку только он непосредственно располагается внутри и выступает его дочерним элементом.
располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.
Пример 5. Дочерние селекторы
Результат данного примера показан на рис. 3.
Рис. 3. Изменение стиля дочерних элементов
Смежные селекторы (A + B)
Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.
Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none . При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.
Пример 6. Смежные элементы
Братские селекторы (A ~ B)
Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.
В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl . Это меняет текст и расположение элементов справа налево.
Пример 7. Братские селекторы
Результат данного примера показан на рис. 4.
Рис. 4. Использование братского селектора
Комбинации селекторов позволяют выделить элемент, расположенный справа или внутри заданного элемента, но никак не родительский элемент или элемент, расположенный слева.
Селектор потомков соответствует всем элементам, которые являются потомками указанного элемента.
В следующем примере выбираются все элементы
внутри элементов:
Пример
Селектор дочерний (>)
Дочерний селектор выбирает все элементы, которые являются потомками указанного элемента.
В следующем примере выбираются все элементы
, которые являются дочерними для элемента :
Пример
Соседний родственный селектор (+)
Соседний родственный селектор используется для выбора элемента, который находится непосредственно после другого конкретного элемента.
Родственные элементы должны иметь один и тот же родительский элемент, а "смежные" элементы должны "следовать после".
В следующем примере выбирается первый элемент
, который размещается сразу после элемента :
Пример
Общий родственный селектор (~)
Общий (родственный) одноуровневый селектор выбирает все элементы, которые являются братьями и сестрами указанного элемента.
В следующем примере выбираются все элементы
, которые являются родственниками элемента :
Пример
Проверьте себя с помощью упражнений!
Все CSS селекторы комбинатора
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности. Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере. Также доступна версия сайта W3Schools на украинском языке. Copyright 1999-2021 by Refsnes Data. All Rights Reserved. Сайт работает на фреймворке W3.CSS.
