[英]Apply class to div that has another div with specific class inside it
這是我的 HTML：
<div class='class1'>
<div class='class2'>
<div class='class3'>
<a class='link' href='alink'>Go somewhere</a>
</div>
</div>
<div>
我需要做的是將 CSS class 應用於具有 class2 的 div，但前提是它們有一個內部帶有 class3 的 div；
.class1 .class2 ".....class3"{
border: 1px black;
}
如果class2里面沒有class3的div，我需要應用另一個CSS class：
.class1 .class2{
border: 0;
}
謝謝。
為了 select 具有 class2 的文檔，您需要找到具有 class3 的所有元素的父級。 不幸的是，css 中沒有父選擇器之類的東西。 要求很高，但存在性能問題。
請參閱此已回答的問題以獲取更多信息。
您需要為此使用 JavaScript，試試這個 Jquery 代碼：
在你的<head>標簽中添加這個腳本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
將此代碼放在<script>標記中：
if ($(".class2 .class3").length > 0){
$(".class2").css("border", "1px black")
} else {
$(".class2").css("border", "border: 0")
}
僅使用 CSS 無法實現此目的。 你需要一點 javascript 這里。 在下面的示例中，我將.redBorder class 應用到內部帶有 .class3 div 的 .class2 div，否則它將有一個.blackBorder class。
(function() { let class2Divs = document.getElementsByClassName("class2"); Array.from(class2Divs).forEach(elem => { // check whether this div has class3 div if(elem.getElementsByClassName("class3").length) { //if this class2 div has class3 inside, run this code elem.classList.add("redBorder"); } else { //if this class2 div doesn't has class3 inside, run this code elem.classList.add("blackBorder"); } }); }());
div { margin: 20px; }.redBorder { border: 3px solid red; }.blackBorder { border: 3px solid black; }
<div class="class1"> <div class="class2"> <div class="class3">This div has class3 div</div> </div> <div class="class2"> <div>This div doesn't has class3 div</div> </div> </div>
在您的代碼中，觸發點是您的第二個 div <div class="class2">所以您需要找到<div class="class2">有任何子級。 您可以使用 Jquery 找到這個並更改 css
$( ".class2" ).children().css( "border", "0" );
jQuery 如果另一個 div 具有特定的 class，如何將 class 添加到一個 div
[英]jQuery How to add a class to a div if another div has specific class
如果具有特定類的div具有iframe，則將另一個類添加到div
[英]if div with specific class has an iframe add another class to the div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.