Is there a way to hide all divs inside of a parent div/container by adding an inline style to parent?

Question

I am trying to figure out if it is possible to hide all child divs inside of a parent container by adding an inline style to the parent div. I have tried both visibility: hidden; and display: none; Neither one seem to hide the child divs. I was thinking I could just use some jquery to loop through all child divs and add an inline style to each one, although I figure there must be a way that works.

Here is an example:

CSS

  .hero-content {
      text-align: center;
      height: 650px;
      padding: 80px 0 0 0;
    }

    .title, .description {
      position: relative;
      z-index: 2
    }

HTML

<div class="hero-content">
   <div class="title"> This is a title </div>  
   <div class="description"> This is a description</div>  
</div>

Answer 1

You cannot hide child elements using an inline style on parent element, so use display: none; for your child elements, you don't need inline style for doing this

.hero-content > div.title,
.hero-content > div.description {
   display: none;
}

Or if you are going with jQuery solution, than add a class to the parent element and than use the below selector.

.hide_this > div.title,
.hide_this > div.description {
   display: none;
}

Now add .hide_this class on the parent element using jQuery.

$(".hero-content").addClass("hide_this");

Demo (Using .addClass())

---

Or if you are a fan of inline style than here you go

$(".hero-content .title, .hero-content .description").css({"display":"none"});

Demo 2