0

I have n number of containers which has some divs. But I need to change the particular container's width which has . How to achieve this only using css.? (I can do this using Jquery)

if ($(".container #content").length > 0){  
  $(this).closest('.container').css('width','450px'); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
....
</div>
<div class="container">
....
</div>
<div class="container">
..
  <div id="content">...</div>
..
</div>
<div class="container">
....
</div>
Kaushik C
  • 95
  • 9
  • Thanks! So it's not possible with CSS3?? – Kaushik C Feb 15 '19 at 06:54
  • You're trying to make `.container` `450px` wide if it contains `#content`? You could make `.container` `display: inline-block` and then give `#content` `width: 450`. That would do it, though hard to say if it would work for you without more context. – sallf Feb 15 '19 at 06:57
  • That's an interesting answer. But In my case that each container is a pop-up modal. I can't give `display:inline-block` , Because it will affect all other pop-up modal (I don't want to change anything on other container classes). – Kaushik C Feb 15 '19 at 07:03

1 Answers1

0

Try following

$("#content").closest('.container').css('width','450px');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
....
</div>
<div class="container">
....
</div>
<div class="container">
..
  <div id="content">...</div>
..
</div>
<div class="container">
....
</div>

As id is unique and there should maximum be 1 element in html with the said id. However, still you have multiple elements having same id in the hierarchy, then the selector can be updated to $(".container #content")

Nikhil Aggarwal
  • 26,884
  • 3
  • 37
  • 53