CSS 「ある要素の次(前)の要素」を指定するセレクタ

cssで以下のように書くと、「指定した要素の直後(直前)の要素」を指定することができます。

+は、h2の直後にあるpに対してだけスタイルが当たる。
~は、h2の直前にあるpに対してだけスタイルが当たる。

あんまり使う機会はないかもしれないけど、知っておくとここぞというときに使えます。




応用

下のように「構造上first-childが使えないけど、連続する最初の要素だけ変えたい」とかいうときに便利。

こんな構造だったとして、

と書くと、3行目と5行目のpだけ黒で、あとのpは赤くなるよ!

以上、現場からでした。

シェアしてくだちい

フォローしてくだちい