Set bootstrap spacing for all nested items - html

Question

Say I have this snipped of HTML code:
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I would like any item inside the outer div have an horizontal margin of 3.
The only way I know is to add me-3 to the class of each item (the button group and the two other buttons). But I have to remember to add this for any other item I'm going to add.
I tried to add this to the outer div, but of course it refers to the next sibling div (if any).
Is there a way to set this margin in the outer div, but to be applied to the nested elements?

Answer 1

JS Solution
Iterate over all of the outer div children, and setAttribute class `me-3` to each one:
let outerDiv = document.querySelector(".btn-group")
for (let i = 0; i < outerDiv.childNodes.length; i++) {
console.log(outerDiv.childNodes[i])
if (i % 2 == 1) {
outerDiv.childNodes[i].setAttribute("class", "me-3");
}
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
CSS Solution
Similar to the JS solution, use `>` to iterate over all the children of `.btn-group`:
.btn-group > button {
margin-left: 3px;
margin-right: 3px;
}
<div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
</div>
<button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-warning">Clear</button>
</div>
I personally recommend the CSS solution as you can change the margin left and right to your liking.