CSS3の次の兄弟コンボネータ (~)

定義と使用方法

CSSの次の兄弟コンボネータ (~) 最初の要素 (element1) に続く element2。

element1 そして element2 同じ親要素を共有する必要がありますが、 element2 すぐに続かなくても element1 の後。

例

すべての<p>要素の後で同じ親要素を共有する<ul>要素のスタイルを選択して設定します：

p ~ ul {
  background-color: gold;
  border: 1px solid gray;
}

自分で試してみてください

CSS文法

element1 ~ element2 {
  css宣言;
}

技術的な詳細

バージョン： CSS3

ブラウザのサポート

テーブルの数字は、そのコンポーザーの最初の完全サポートするブラウザのバージョンを示しています。

Chrome Edge Firefox Safari オペラ
4.0 7.0 3.5 3.2 9.6