Применить класс к div, у которого есть другой div с определенным классом c внутри него - PullRequest
Новая
       0

Применить класс к div, у которого есть другой div с определенным классом c внутри него

0 голосов
/ 19 июня 2020

Это мой HTML: 

<div class='class1'>
    <div class='class2'>
        <div class='class3'>
            <a class='link' href='alink'>Go somewhere</a>
        </div>
    </div>
<div>

Что мне нужно сделать, так это применить класс CSS к div, у которого есть class2, но только если у них есть div с class3 внутри; 

.class1 .class2 ".....class3"{
    border: 1px black;
}

Если class2 не имеет div внутри с class3, мне нужно применить другой CSS class: 

.class1 .class2{
    border: 0;
}

Спасибо.

Ответы [ 4 ]

0 голосов
/ 19 июня 2020

В вашем коде точкой срабатывания является ваш второй div <div class="class2">, поэтому вам нужно найти, что <div class="class2"> имеет дочерние элементы. вы можете использовать Jquery, чтобы найти это и изменить css

$( ".class2" ).children().css( "border", "0" );
0 голосов
/ 19 июня 2020

Вам нужно будет использовать для этого 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")
    }
0 голосов
/ 19 июня 2020

Этого нельзя добиться только с CSS. здесь вам нужно немного javascript. В приведенном ниже примере я применяю класс .redBorder к div .class2 с div .class3 внутри, иначе он будет иметь класс .blackBorder. 

(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>
0 голосов
/ 19 июня 2020

Чтобы выбрать do c с class2, вам нужно найти родительский элемент всех элементов с class3. К сожалению, в css нет родительского селектора. Его очень просили, но есть проблемы с производительностью.

Пожалуйста, смотрите этот ответ на вопрос для получения дополнительной информации.

Есть ли родительский селектор CSS?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...