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>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