CSS selector changing value if it contains an element

Question

By choosing any selector definition it is possible to set styles for each element that this is defined.

My doubt would be, instead of selecting an element and changing properties for itself, I would choose to search for an element and if I find to set properties for another element with a predefined class.

In summary if .area{} contains div .popup{} area receives overflow: hidden, but overflow auto

Exemplifying in HTML:

<div class="area">
    <div class="popup"></div> <!-- contem entao: overflow: hidden -->
</div>

<div class="area"></div> <!-- nao contem entao: overflow: auto -->
<div class="popup"></div> 

The scroll bar of div .area depends on the div .popup to exist.

:has or :contains

Are not validated selectors.

of course it could be controlled by JS, but I take more into account the use of stylization, or if there is a more correct way to do this is also worth.

Answer 1

A form using only css that could possibly solve your problem, serio the following solution below, using the selector css3 :empty, applying a particular css if the selected element has no child element contained within it.

.area {
  height: 100px;
  margin-bottom: 10px;
  background: #bbb;
  /*contem entao: overflow: hidden*/
  overflow: hidden;
}

.area:empty {
  background: #f00;
  /*nao contem entao: overflow: auto*/
  overflow: auto;
}

<div class="area">
    <div class="popup"></div> <!-- contem entao: overflow: hidden -->
</div>

<div class="area"></div> <!-- nao contem entao: overflow: auto -->

Pórem, this solution can solve your problem, but will only work if the element with class .area, always be vacuous, with no sub-element inside it.

However, if the above solution doesn’t meet your problem, you wouldn’t have a way to do what you want by just using CSS2 or CSS3. For currently the css does not work with selection of relatives, possibly this may be implemented in the next versions of it.

Then a good solution to your problem would be using Javascript and jQuery.

Below is a simple example using jQuery:

$(function() {

  $('.area').each(function() {

    var child = $(this).children('.popup');
    
    if (child.length == 0) {
    	$(this).addClass('has-no-popup');
    }

  });
  
});

.area {
  height: 100px;
  margin-bottom: 10px;
  background: #bbb;
  /*contem entao: overflow: hidden*/
  overflow: hidden;
}

.has-no-popup {
  background: #f00;
  /*nao contem entao: overflow: auto*/
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area">
    <div class="popup"></div> <!-- contem entao: overflow: hidden -->
</div>

<div class="area"></div> <!-- nao contem entao: overflow: auto -->