CSS 兄弟要素が表示されてたら

CSS 兄弟要素が表示されてたら
この記事は約2分で読めます。
広告

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を改修しようとした時、自分で書いたコードが「???」になりかねない。

エンデ・バタローをフォローする
CSS

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました