弟要素にスタイルを適用する

間接セレクタ

要素名A ˜ 要素名B{~}

同じ親要素内にある要素名Aより後ろに記述された要素名Bにスタイルを適用します。同じ親要素内の子要素同士は、前に記述されている要素を兄要素、後ろに記述されている要素を弟要素と呼びます。

セレクタの使用例

以下の例では、2つ目以降のli要素にスタイルを適用し、文字を太字で表示しています。

CSS
li ˜ li {
  font-weight: 600;
}
HTML
<ul>
  <li>リュックサック</li>
  <li>懐中電灯</li>
  <li>非常食</li>
  <li>医療キット</li>
  <li>ブランケット</li>
  <li>水</li>
</ul>

関連記事