如何通过检查元素的子类具有特定的类名来将css属性添加到该元素的伪类中

Question

<div class="header">
<span class= "text">
  <span class="icon disable">
  ::before
  </span>
<span>
  ::after
</div>

I want to add css property background:transparent to psuedo class ::after of span with class name "text" by checking whether its child span has class name "disable".

Please, check out the image to understand my requirement to give me any solution. is it possible do it in css?

I trying this for many hours.. please,help me! Thanks in advance.......... described in image

Answer 1

It's not that simple. But you can do it simply using jQuery hasClass() method.

HTML

<div class="header">
  <span class= "text">
    <span class="icon disable">
      Hai
    </span>
  <span>
</div>

JQuery

if($('.icon').hasClass('disable')) {
  $('.text').addClass('disableChild')
}

CSS

.disableChild {
  background-color: red;
}

Check this link codepen for working model.

Answer 2

 if ($(".text").children().hasClass("disable")) { $(".text").addClass("child-disable"); } 

 .text.child-disable::after { background: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <span class="text"> <span class="icon disable"> </span> </span> </div> 

Or, when you have multiple elements on your page and you want make this happen for each element, you can use the following:

 $(".text").each(function(i, el) { var $this = $(el); if ($this.children().hasClass("disable")) { $this.addClass("child-disabled"); } }); 

 .text.child-disabled::after { background: transparent; } .header { background-color: #f5f5f5; width: 95%; margin: 12px auto; } .icon { display: block; text-align: center; } .icon:not(.disable) { color: red; } .text::after { content: ""; width: 100%; display: block; height: 4px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <span class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p> <span class="icon disable"> &hearts; </span> </span> </div> <div class="header"> <span class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p> <span class="icon"> &hearts; </span> </span> </div>