0

I have multiple <div> wrapping some children which have a class. But the problem is that the parent <div> doesn't have a class or id. Is it possible to add a margin-bottom between the wrapping parent divs which has a specific child with just pure CSS or do I need to use jQuery or JS to achieve this?

Example of how the HTML could look like:

// parent 
    <div> 
    // children
       <h2 class="child-class-1" ></h2>     
       <p class="child-class-2" ></p>
    </div>
    
    // margin-bottom between the wrapping parent divs
    
    <div>
       <h2 class="child-class-1" ></h2>    
       <p class="child-class-2" ></p>
    </div>

I found an solution with pure CSS.

Solution here: 

div > .child-class-1, .child-class-2 {
margin-bottom: 80px;
}
   <div style="background-color:red; height: 400px; width:400px;"> 
       <h2 class="child-class-1" ></h2>     
       <p class="child-class-2" ></p>
    </div>
    
    <div style="background-color:red; height: 400px; width:400px;">
       <h2 class="child-class-1" ></h2>    
       <p class="child-class-2" ></p>
    </div>
    
        <div style="background-color:red; height: 400px; width:400px;">
       <h2></h2>    
           <p>Dosent affect the div which dosen't have the child class</p>
    </div>
Filip Huhta
  • 2,043
  • 7
  • 25

1 Answers1

0

Maybe you can add a properties for the <div> tag in your HTML with external/internal style, but it's affect all the tag in your current / all html pages

example for your css code :

div {
  margin-bottom: 12px
}

or maybe you can add custom style for just one <div> only with inline style, you can use :

<div style="margin-bottom:12px">
     <h2 class="child-class-1" ></h2>    
     <p class="child-class-2" ></p>
</div>

but it quite bother, since you have another <div> in your HTML

Rio Ramadhan
  • 17
  • 5