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年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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