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

Урок 9 из 15 курса Селекторы CSS на Coddy.

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

Синтаксис

former_element + target_element {
  /* свойства стилей */
}

Предположим, у нас есть такая структура HTML:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Чтобы стилизовать <span>, идущий сразу за абзацем, вы должны использовать селектор смежных сиблингов:

p + span {
   font-weight: bold;
}

В этом случае "Adjacent span" будет иметь жирное начертание шрифта.

Задание

Легко

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

Попробуйте сами

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

Все уроки раздела Селекторы CSS

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

Назначение селекторов CSS Почему они важны?

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

Введение в селекторы атрибутов Наличие и точные значения Селекторы значений атрибутов Селекторы значений атрибутов II Селекторы значений атрибутов III

2Простые селекторы

Селекторы типов Селекторы классов Селекторы ID Универсальные селекторы

3Селекторы-комбинаторы

Дочерний селектор Селектор потомковСмежный селекторОбщий родственный селектор