Question 297930 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to apply CSS to a parent element if only a certain child element exists?

Is a there a way using CSS to apply styles to a parent element only if the parent has a certain child element?

Here is my HTML:

<div class="Environment">
    <div class="col-md-6 interior_environment">
        <div class="aboutEnvironment">
            <div class="col-sm-12 col-md-12">
                <div class="title_environment"></div>
                <div class="description_environment">
                    <p><span>The natural environment or natural world encompasses all living and non-living things occurring naturally, meaning in this case not artificial. The term is most often applied to Earth or some parts of Earth.</span></p>
                </div>
            </div>
        </div>       
    </div>
</div>

I want add the following CSS(mentioned below) to .Environment and .interior_environment only if .aboutEnvironment class is present inside .Environment .interior_environment.

If .aboutEnvironment class is not present inside .Environment .interior_environment then this CSS should not be added to .Environment and .interior_environment.

.Environment
{
  display: block;
}
.interior_environment
{
  flex: 1;
}

Is there a way to do this using CSS or does it have to be done through JavaScript?

Tags:

3

Answers


  1. 0

    You can achieve this using the following jQuery:

    $(document).ready(function() {
    if ($('.Environment .interior_environment .aboutEnvironment').length > 0) {
        $('.Environment').css('display', 'block');
        $('.interior_environment').css('flex', '1');
    }
});

    This a simple way to do this. You can also try the more complex way of checking each child or parent but that would be not so clean.

    By using the above method, it will return false for the condition if .aboutEnvironment is not present inside the other two classes.

    Remember this will only work if there is only one such element in the page if there are multiple such elements you need to use the child element and parent element feature of jQuery.

    Login or Signup to reply.
  2. 0

    loop over .Environment .interior_environment and check whether any child has that aboutEnvironment class or not. Based on that apply the condition.

    Working snippet:

    $('.Environment .interior_environment').each(function(){
  if($(this).find('.aboutEnvironment').length > 0){
      $(this).closest('.Environment').css('display', 'block');
        $(this).css('flex', '1');
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Environment">
    <div class="col-md-6 interior_environment">
        <div class="aboutEnvironment">
            <div class="col-sm-12 col-md-12">
                <div class="title_environment"></div>
                <div class="description_environment">
                    <p><span>The natural environment or natural world encompasses all living and non-living things occurring naturally, meaning in this case not artificial. The term is most often applied to Earth or some parts of Earth.</span></p>
                </div>
            </div>
        </div>       
    </div>
</div>

<div class="Environment">
    <div class="col-md-6 interior_environment">
        <div class="notaboutEnvironment">
            <div class="col-sm-12 col-md-12">
                <div class="title_environment"></div>
                <div class="description_environment">
                    <p><span>The natural environment or natural world encompasses all living and non-living things occurring naturally, meaning in this case not artificial. The term is most often applied to Earth or some parts of Earth.</span></p>
                </div>
            </div>
        </div>       
    </div>
</div>
    Login or Signup to reply.
  3. 0

    Yes, There are several other ways please try below one:

    1. This will search for class pattern and apply the styles you need:
    div[class*="aboutEnvironment"]{
 /* Write css style that  you want to apply  */
}
    1. This will apply and check if the class is present, however it may not be supported in firefox just check once rest other browsers have added support for this one, refer
    div:has(> aboutEnvironment){
>  /* Write style that  you want to apply  */ }
    1. Also you can use get the element by className and then apply your classes to it.using:

    document.getElementsByClassName("aboutEnvironment");

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search