How to add class to all elements inside div? - css

Question

I have 100 buttons inside a div:
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
...
</div>
I want to style all buttons in the bootstrap style. So, I need to change everywhere < button > to < button class="btn" >. I want to do it without actually adding class="btn" 100 times for each < button > element. So, I need some CSS rule that says that all buttons inside the div are of class "btn". So, I need something like this:
.button_group button {
... add class="btn" to all elements ...
}
Is it possible at all? What is the correct syntax?
Thank you!!

Answer 1

HTML
<div class="button_group">
<button> ... </button>
<button> ... </button>
<button> ... </button>
</div>
CSS
.button_group > button {width: 100px; height: 50px;}
And the fiddle https://jsfiddle.net/049Lj4LL/4/
There is no need to ad class="btn" to every button if they are the same, just add a class to the parent div like you have class="button_group" to be able to identify that specific group of buttons. Like this https://jsfiddle.net/049Lj4LL/6/ and like this https://jsfiddle.net/049Lj4LL/7/

Answer 2

Assuming you have a jquery-like library, you would add a class btn to all the <button> elements like that :
$('div.button_group button').addClass('btn');
Edit: In case you are using the sass or less version of bootstrap, which I encourage you, you can try to extend the btn bootstrap class. Contrary to the javascript solution mentioned above, that won't add the class btn to the elements, but they will inherit the styles of the btn class. Here is the sass solution :
.button_group {
button {
#extend .btn;
}
}

Answer 3

Use javascript.
In JS, you can use the childNodes property of the div element, that you can access using document.getElementByClassName. In the array document.getElementByClassName("button_group").childNodes are initialized all the button tags written in the div. Set the class name with .className. Add the JS code to your HTML with the script tag:
<script>
for(let i=0; i<document.getElementByClassName("button_group").childNodes.length; i++){
document.getElementByClassName("button_group").childNodes[i].className="theClassNameYouDesire";
}
</script>