1

I want to hide bannerbox div if banner-description is empty

<div class="bannerbox">
<div class="banner-description">If Empty then Hide</div>
</div>

I tried few thing but didn't work

.banner-description:blank{display:none}

This hide the child

I am looking for solution in CSS if possible

Learning
  • 19,469
  • 39
  • 180
  • 373
  • if it's empty then when hide it? – Temani Afif Jan 16 '19 at 12:01
  • @TemaniAfif, I need to hide parent div if child div is empty – Learning Jan 16 '19 at 12:02
  • This is not possible in pure CSS as it can't select parents of elements – Matt Jan 16 '19 at 12:02
  • did you try javascript ? – Gaurav Rana Jan 16 '19 at 12:02
  • yes I understand this, considering your code, if the child is empty then the parent is also empty, so you will see nothing (unless you are hidding more code to us) – Temani Afif Jan 16 '19 at 12:02
  • 1
    @TemaniAfif The parent could have any number of styles applied that make it visible when empty. – Turnip Jan 16 '19 at 12:04
  • It was easy with Jquery i cant use JS or Jquery need to find solution with CSS – Learning Jan 16 '19 at 12:04
  • 2
    @Learning There is no solution with CSS. – Turnip Jan 16 '19 at 12:05
  • @Roy Since `.bannerbox` has a child element `:empty` would not work. – Turnip Jan 16 '19 at 12:07
  • @Turnip something we don't see here, he should add more context about this as it may be an XY problem and he's tackling the problem in a wrong way. Probably he don't even need to target a parent element which is impossible. – Temani Afif Jan 16 '19 at 12:07
  • @TemaniAfif, This is simple there is no other context to it i simple have to hide parent div if child div is empty. If there was more to it i would have definitely added more details and fiddle example. Is this duplicate question – Learning Jan 16 '19 at 12:12
  • in this case you cannot, as there is no way to target an parent element based on child state thus the duplicate – Temani Afif Jan 16 '19 at 12:14
  • @TemaniAfif, thank you.. so only solution is using JS – Learning Jan 16 '19 at 12:16
  • @Turnip here is an example of situation where I hide a parent element based on childs https://stackoverflow.com/q/53209544/8620333 without the need of parent selector because it's a particular case with specific CSS. So the generic answer is "no" but with more context we can handle this differently. – Temani Afif Jan 16 '19 at 12:18
  • @Learning yes actually you need JS for this. – Temani Afif Jan 16 '19 at 12:21

1 Answers1

-4

This can not be achieved via css, you can use JS/jQuery like following code

if($('.banner-description').html()==''){
 $('.bannerbox').hide();
}

Hope this will work.

Mohammad Bilal
  • 21
  • 2