CSSで前の要素や後ろの要素など、兄弟要素が見えてたら(表示されてたら)をCSSだけで指定します。
次のHTMLを例に挙げて兄弟要素の表示状態でスタイルを変更したいと思います。
HTML
<div class="demo"> <h2>タイトル!</h2> <p>本文本文本文本文本文本文本文本文</p> <a class="show" href="">リンクボタン</a> </div>
このHTMLで、aタグに「.show」が付いていたら(表示されていたら)<h2>を赤くしてみます。
CSS
.demo h2:has( + p + a.show ) { color: red; }
結果は次の通り
上手く行きました。
「:has()」で<h2>の2つ隣の「aタグ」に「.show」が付いていたら、<h2>のスタイルを変更しています。
「:has( + 要素 )」で隣接する次の要素を指定しています。
この場合は、<h2>と<a>の間に<p>が有り隣接していませんでした。
なのでこのように「:has( + 要素 + a.show )」しました。
このCSSを訳すと、「隣接する次の要素に隣接する次の「a」に「.show」が付いてたら」という、、、よくわからない状態になりました。
指定が複雑ですが、JSで指定するより手間をかけず表示できるので「:has()」って便利でイイで好きです。
CSSでこんな条件分岐的な処理ができるって使いどこを色々想像できますよね。
でも複雑すぎて数年後とかにCSSを改修しようとした時、自分で書いたコードが「???」になりかねない。
コメント