一般兄弟セレクター
CoddyのHTMLジャーニー「CSSマスタリー」セクションの一部。レッスン 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ルールを作成してください。
自分で試してみよう
<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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSマスタリーのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド