[CSS] 子要素がactiveのときに親要素のactiveを適用させたくない

前提・実現したいこと

マウスダウンしたときに背景色を変えるCSSを書いています。
親要素(子要素以外のエリア)でマウスダウンしたときは要素全体を、
子要素でマウスダウンしたときは子要素のみスタイルを適用したいです。

発生している問題・エラーメッセージ

子要素でマウスダウンしたときに、親要素の:active擬似クラスも適用されます。

該当のソースコード

html
1<div class="parent">
2  <div>hoge</div>
3  <div class="child">fuga</div>
4</div>
5

css
1.parent:active {
2	background-color:red;
3}
4.child:active {
5	background-color:blue;
6}

試したこと

おそらく:not擬似クラスを使用するのだと思うのですが書き方が思いつきませんでした。

Lhankor_Mhy

2021/02/27 02:19

CSSではできないと思います。JavaScriptでの対応を検討してください。

行動規範の内容に同意します

回答2件

親の親を用意すれば、pointer-eventsプロパティを使ってできるかな。

pointer-events: none;を設定すると、その要素(Aとする)は通常はポインターイベント(activeとかhoverとか)を受け取らなくなる。
ただし、要素Aの子要素(Bとする)にpointer-events: auto;が設定されていて、要素Bがポインターイベントを受け取るときにだけ、要素Aのイベントリスナーがトリガーされ、activeとかhoverとかが有効になる。

pointer-events - CSS: カスケーディングスタイルシート | MDN

HTML
1        <div class="grandparent">
2            <div class="parent">
3                <div>hoge</div>
4                <div class="child">fuga</div>
5            </div>
6        </div>

CSS
1.grandparent:active {
2    background-color: red; /* 親要素の全体に適用する背景色 */
3}
4
5.parent {
6    pointer-events: none;
7}
8
9.parent:active {
10    background-color: white; /* 子要素がactiveなときの親要素の背景色 */
11}
12
13.child {
14    pointer-events: auto;
15}
16
17.child:active {
18    background-color: blue; /* 子要素がactiveなときの子要素の背景色 */
19}

投稿2021/02/27 02:47

編集2021/02/27 02:48

Daregada

総合スコア11990

nonimobi

2021/02/27 06:45

HTML構造がかわってしまうということで、今回は採用しませんでしたがとても参考になりました。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

JavaScriptを使った方が素直だと思いますが、

CSSだけでやるなら、子要素を親要素から出しちゃって、CSSで重ねるとか、

html
1<div class="parent">
2  <div>hoge</div>
3</div>
4<div class="child">fuga</div>

css
1.parent {
2  padding-bottom: 1.5em;
3}
4.parent:active {
5  background-color:red;
6}
7.child {
8  margin-top: -1.5em;
9}
10.child:active {
11  background-color:blue;
12}

親子関係は維持したいというのなら、

子要素に tabindex="-1" でフォーカスを取れるようにしておく。

html
1<div class="parent">
2  <div>hoge</div>
3  <div class="child" tabindex="-1">fuga</div>
4</div>

:not(:focus-within) で子要素にフォーカスがある場合は反応しないようにしておく。

css
1.parent:active:not(:focus-within)   {
2    background-color:red;
3}
4.child:active {
5    background-color:blue;
6}
7.child {
8  outline: none;
9}