最もネストされた要素だけを一度にACTIVEにする方法を教えてください。

Question

アクティブであるときにCSSが外観を制御するいくつかのネストされた要素を持っています。

CSS：

.test { 
    background: red; 
} 

.test:active { 
    background: blue; 
} 

HTML：

<div class="test" id="A"> 
This is part A. 
<div class="test" id="B"> 
This is nested part B. 
</div> 
</div> 

問題が、あるとき、ネストされたDIV（B）、両方のAとBの色が​​変化し、代わりにちょうどBの私は、マウスダウン。

Iは、マウスダウンイベントをキャプチャし、伝播を停止しようとした：

document.getElementById("B").addEventListener("mousedown", function(event) { 
    event.stopPropagation() 
}) 

これを実行すると、 "A"のmousedownイベントハンドラが呼び出されていないことがわかります。しかし、 "A"要素は、キャプチャされたイベントが起動される時点で既にそのアピアランスをアクティブ状態に変更しました！

一度に実際に最もネストされた要素をアクティブにすることのみを強制する方法を教えてください。バックグラウンドを変更するには "A"が必要ですが（マウスが押されている）、 "B"がアクティブになっているときは変わりません。

Answer 1

あなたはこのケースでは、このセレクタを使用することができます。

.test > .test:active { 
    background: blue; 
} 

Answer 2

これは、与えられた要素は.testクラスを持つ子どもを持っているかどうかをチェックしますこれは、JavaScriptで行うことができます。将来的にはCSSセレクタ:has()でこれを行うことができますが、どのブラウザでもスタイルシートをサポートしていません。

以下のデモは、特定の構造内の「最もネストされた」.test要素である場合にのみ青色になります。これはあなたが探していたものと信じています。

質問がある場合はお知らせください。

document.querySelectorAll(".test").forEach(function(elem) { 
 
    elem.addEventListener("mousedown", function (event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    if (!event.target.querySelector(".test")) { 
 
     event.target.classList.add("active"); 
 
    } 
 
    }); 
 
    elem.addEventListener("mouseup", function (event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    document.querySelectorAll(".active").forEach(function (elem) { 
 
     elem.classList.remove("active"); 
 
    }); 
 
    }); 
 
});

.test { 
 
    background: red; 
 
} 
 
.active { 
 
    background: blue; 
 
}

<div class="test" id="A"> 
 
    This is part A. 
 
    <div class="test" id="B"> 
 
    This is nested part B. 
 
    </div> 
 
</div> 
 

 
<div class="test" id="C"> 
 
    This is part C. 
 
</div> 
 

 
<div class="test" id="D"> 
 
    This is part D. 
 
    <div class="test" id="E"> 
 
    This is nested part E. 
 
    <div class="test" id="F"> 
 
     This is nested-nested part F. 
 
    </div> 
 
    </div> 
 
</div>

----あなたは本当に "最もネストされた" 要素があることを気にしないようにEDIT ----明確化した後

、それはそうですあなたが本当に欲しいのは、アクティブになるためにマウスで押された単一の要素だけです。そうであれば、実際はもっと簡単です。コードは次のようになります：

document.querySelectorAll(".test").forEach(function(elem) { 
    elem.addEventListener("mousedown", function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    event.target.classList.add("active"); 
    }); 
    elem.addEventListener("mouseup", function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    document.querySelectorAll(".active").forEach(function(elem) { 
     elem.classList.remove("active"); 
    }); 
    }); 
});