:has()を使ったcssの当て方についてご質問です。 <div id="page-wrapper"> <div class="hogehoge-content"> ...

[Q&A] :has()を使ったcssの当て方について

:has()を使ったcssの当て方について

:has()を使ったcssの当て方についてご質問です。

<div id="page-wrapper">
　<div class="hogehoge-content">
　　<div><div><div>…
　　　<div class="sort-active"></div>
　　</div></div></div>…
  </div>
</div>

HTMLがこのような構成で #page-wrapper が .sort-active を持っている場合に#page-wrapper にスタイルを当てたいです。

#page-wrapper:has(.sort-active){
background-color: red;
}

↑のようにCSSを当てると .sort-active の有無を判別し #page-wrapper の背景色が変わるようになったのですが、
#page-wrapper と .sort-active は他のページでも使われているため、
.hogehoge-content の中にある .sort-active に限定したいです。

#page-wrapper:has(.hogehoge-content.sort-active){
background-color: red;
}

↑やりたいこととしては上記のイメージになるのですが、書き方が正しくないのか適応されず困っています。

HTML編集もしくはJSで他のページと被らない専用のクラス名追加できれば解決するのですが、要件が少し特殊でCSSで解決する必要があり。。
良い解決方法がありましたらご教示いただきたいです。
よろしくお願いいたします。

2Answer

@southkey47 posted at 2024-04-15

htmlの条件構造をテキストにしてみましょう

.sort-activeを内包する.hogehoge-contentを内包する#page-wrapperにスタイルを充てたい

要素を分解して条件を整理してみましょう

css

#page-wrapper {
  スタイルを充てたいのはここ【条件1】
}
:has(.sort-active) {
  .sort-activeを内包していることを条件にしたい【条件2】
  ただしこの条件は他のページにも影響してしまう
}
:has(.hogehoge-content) {
  .hogehoge-contentを内包していることを条件にしたい【条件3】
  この条件であれば独自性を保てるため他ページへ影響しない
}
.hogehoge-content:has(.sort-active) {
  .sort-activeを内包する.hogehoge-contentという条件が構造上必要である【条件4】
}

つまり【条件4】を内包する【条件1】という形に出来ればよいので

css

【条件1】:has(【条件4】) {
　〜
}
↓
#page-wrapper:has(.hogehoge-content):has(.sort-active) {
　〜
}

実は条件構造がテキスト化出来ればあとは改行による分解と逆から読んで組み立てるだけで良かったりします

【1】.sort-activeを内包する
【2】.hogehoge-contentを内包する
【3】#page-wrapper
↓
【3】#page-wrapper
【2】:has(.hogehoge-content)
【1】:has(.sort-active)

↓

css

#page-wrapper:has(.hogehoge-content):has(.sort-active) {
　〜
}

また、Sassのようにcssを入れ子構造で書いてもわかりやすいかもしれないですね

scss

#page-wrapper {
  &:has(.hogehoge-content) {
    &:has(.sort-active) {
      〜
    }
  }
}

htmlと同じ構造であるというのが理解しやすいと思います

See the Pen Untitled by southkey47 (@southkey47) on CodePen.

@h_kono0707 posted at 2024-04-15

- #page-wrapper:has(.hogehoge-content.sort-active){
+ #page-wrapper:has(.hogehoge-content .sort-active){
  background-color: red;
}

.hogehoge-content.sort-activeとした場合は、ある要素にhogehoge-contentクラスとsort-activeクラスの両方が設定されている必要があります。

例

<div class="hogehoge-content sort-active"></div>

.hogehoge-content .sort-activeとする（スペースを空ける）ことで子要素を見にいくようになります。

:has()を使ったcssの当て方について

2Answer

Your answer might help someone💌

Popular Questions