Общий родственный селектор

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 5 из 43.

Общий селектор соседних элементов (~) выбирает все элементы, которые являются соседними для указанного элемента и следуют за ним.

Например:

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

С этим CSS:

h2 ~ p {
  color: blue;
}

После применения этого CSS результат будет следующим:

Абзац 1 остается без изменений (он не является соседним элементом, идущим после h2)

Абзац 2 становится синим (это соседний элемент, который идет после h2)
Абзац 3 становится синим (это соседний элемент, который идет после h2)

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте правило CSS, используя общий селектор соседних элементов, чтобы все элементы <p>, которые идут после <h1>, окрасились в ярко-розовый цвет (#ff69b4).

Шпаргалка

Общий родственный селектор (~) выбирает все элементы, которые являются родственными для указанного элемента и следуют за ним.

h2 ~ p {
  color: blue;
}

Это выбирает все элементы <p>, которые являются родственными для <h2> и следуют за ним в структуре HTML.

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

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</p>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.