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

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

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

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

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

コメント

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