要素名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>

関連記事

• HTMLの基本構造 - 親要素と子要素、階層構造について理解する