Since the question also includes the Javascript tag, I will provide a solution using Javascript.
Take another look at your HTML. When the onload event is triggered, we call the applyStyleChanges() function:
<body onload="applyStyleChanges()">
<div id="content">
<main>
<p>Unaffected</p>
<!-- ... -->
<h2 > Example Title</h2>
<p>Hello World</p>
<table class="table table-striped table-responsive-md btn-table">
<tr>
<td>Example 1 </td>
<td>Example 2</td>
</tr>
</table>
</main>
</div>
</body>
The implementation of the applyStyleChanges() function is as follows:
<script>
function applyStyleChanges()
{
var node = document.getElementsByTagName("h2")[0];
while(node = node.nextSibling)
{
if(node.nodeType == 1)
{
node.style.marginTop = "20px";
node.style.marginBottom = "20px";
}
}
};
</script>
Explanation
- We start by selecting our "boundary" element, which in this case is the first
h2
- We iterate through each sibling until we reach the end of the list
- We only consider elements of type "1" (element nodes)
- For each selected element, we apply the specified set of styling properties using
node.style
- All siblings before our "boundary" element remain unaffected
- Note that accessing properties like
margin-top and margin-bottom</code is done using <code>marginTop
and marginBottom respectively. In Javascript, dashes are removed and camel case notation is used