Apply style to parent if child is not empty

Question

Is it possible to apply style to a parent element if child is not empty? I need to remove border from empty container.

.parent {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
}

<div class="parent">
  <div class="child">
    not empty
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

I've tried:

.parent:not(> .child:empty)

but cleaerly this is going to look for .child class inside .parent... Is there a way to do it with CSS?

Not yet or not without JavaScript as there's no parent selector in CSS currently — j08691, Jan 30 '20 at 17:46

score 0 · Answer 1 · answered Jan 30 '20 at 18:00

The title seems to be a tad misleading, but if want to apply css styling to a div that does not contain any contents you may run into some problems, what may work is defining a label inside the child div and setting its color to match your background.

<label style="color= "white"> a </label>

this will provide the intended look

Juan Marco · Answer 2 · 2020-01-30T19:27:30.523

0

After a bit of research, it would appear the best option would be the pseudo-class selector :has().

Unfortunately, it's experimental (it's still a draft) and can only be used with functions like document.querySelector() and not directly on stylesheets.

Research info and credits:

Stackoverflow: Is there a CSS parent selector?
Can I use...

edited Jan 30 '20 at 19:27

answered Jan 30 '20 at 18:00

Juan Marco

1,806
2
18
22

But I'm trying to remove the border from an empty parent. – santa Jan 30 '20 at 18:12
Ah, I see. Let me see if I can come up with something that works using just CSS. – Juan Marco Jan 30 '20 at 18:29

HisPowerLevelIsOver9000 · Answer 3 · 2020-01-30T18:29:53.753

You might want to approach this from the reverse train of thought. Instead of IF it isn't empty. Style your element how you want to originally, then style the ones that are empty differently.

.child {
   border:1px solid #000;
}
.parent .child:empty {
   border:none;
}

JS fiddle for reference: https://jsfiddle.net/Le93svqb/

This would allow you to set your default style on all the .child elements and style the empty ones in another manner.

score -1 · Answer 4 · answered Jan 30 '20 at 18:02

-1

i think it will be easier for you if you use some JavaScript

answered Jan 30 '20 at 18:02

Adil Bimzagh

74
4

Normally yes, but not in the project I'm working on. – santa Jan 30 '20 at 18:13
This is a comment, not an answer. – connexo Jan 30 '20 at 19:29

Apply style to parent if child is not empty

4 Answers4