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

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

Селектор смежных элементов (+) используется для стилизации элемента, который следует непосредственно за определенным элементом. Оба они должны иметь одного и того же родителя, а «смежный» означает «расположенный непосредственно рядом».

Например:

<h2>Heading</h2>
<p>This paragraph is styled</p>

С этим CSS:

h2 + p {
  font-weight: bold;
}

Абзац стилизован, потому что он следует непосредственно за элементом h2.

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

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

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

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

Задание

Легко

Создайте CSS-селектор, который выбирает только абзацы (<p>), следующие непосредственно за элементом <h2>, описывающим баскетбольный матч. Оформите эти абзацы, установив синий цвет шрифта и размер шрифта 18px.

Шпаргалка

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

Синтаксис:

element1 + element2 {
  /* стили */
}

Пример:

h2 + p {
  font-weight: bold;
}

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

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

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

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

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