How do I add css property for particular Div if class is found(JQuery)

$("p.ABC").parents("div.b").css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
   <h1>Hello</h1>
   <div class="a"> 
     <p class="ABC">A........Z</p> //this could be present in some pages
   </div>
</div>

• $("p.ABC") this finds all the p elements has the class ABC.
• parents("div.b") finds the first parent that is div and has class named b of the selected element.
• css() adds the styles you want. You can also use addClass() method to add predefined class.

Please check if this helps

if($( "p" ).hasClass( "ABC" )) {
// if you want to add a class with many properties, then
$( "div.b" ).addClass( "yourClass" );
// if you want to add one property to existing class then the below statement
$( "div.b" ).css( "attribute-name", value );
}

You can add all the css properties in "yourClass"

if($("p").hasClass("ABC")) {
$("div.b").css("color", "blue");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
   <h1>Hello</h1>
   <div class="a"> 
     <p class="ABC">A........Z</p> //this could be present in some pages
   </div>
</div>

Please check the code snippet.

I added a css property color as blue to the class 'b' if 'p' has 'ABC'. its working

One method is to look directly at <p class="ABC"> and check if it has a class using hasClass(). Then you can traverse upwards to find the nearest element with class="b"

Something like this:

var elementToModify = $('p').hasClass('ABC').closest('.b');
elementToModify.prop('property', newValue);

Checkout these to further understand their use:

prop()

closest()

You can use $("p.ABC") to find all <p> with class ABC then .closest(".b") to find the parent div with class b then .css() to change css properties.

I recommend using .addClass() / .removeClass() rather than change css directly, but this helps you find the parent.

This also allows you to have multiple div class='b' in your html and it will only apply to the one with ABC

$("p.ABC").closest(".b").css("background-color", "pink");

.b+.b {
  border-top: 1px solid black;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="ABC">A........Z</p> //this could be present in some pages
  </div>
</div>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="DEF">ABC not present</p>
  </div>
</div>

You can also turn it around using :has

$(".b:has(.ABC)").css("background-color", "pink")

which states: select all .b that has at least one child that has class .ABC, which is nearer to your concept of: add css to div with class "b" if <p> contains class="ABC"

So it depends on which way you want to work it.

$(".b:has(.ABC)").css("background-color", "pink")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="ABC">A........Z</p> //this could be present in some pages
  </div>
</div>
<div class="b">
  <h1>Hello</h1>
  <div class="a">
    <p class="DEF">ABC not present</p>
  </div>
</div>