一般兄弟セレクター

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 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 の後に続く兄弟要素です)

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

一般兄弟セレクタを使用して、<h1>の後にあるすべての<p>要素を明るいピンク色 (#ff69b4) にするCSSルールを作成してください。

チートシート

一般兄弟セレクタ (~) は、指定された要素の兄弟であり、かつその後に続くすべての要素を選択します。

h2 ~ p {
  color: blue;
}

これは、HTML構造内で <h2> の兄弟であり、かつその後に続くすべての <p> 要素を選択します。

自分で試してみよう

<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>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。