bootstrap css classes hierarchy - html

Question

I would like to learn how to build my css file using bootstrap elements. It's pretty tricky to try to select a unique element when all have pretty much the same classes so beside using id's how can I select a unique element from a structure like this one?
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-2">CREATED</div>
<div class="col-md-2">MODIFIED</div>
<div class="col-md-2">USER STATUS</div>
<div class="col-md-2">STATUS</div>
<div class="col-md-2">MODEL</div>
</div>
<div class="row">
<div class="col-md-2">26/02/2018</div>
<div class="col-md-2">26/02/2018</div>
<div class="col-md-2">quote requested</div>
<div class="col-md-2">
<select class="form-control"></select>
<button class="btn btn-default">SAVE</button>
</div>
<div class="col-md-2">
<button class="btn btn-default">DOWNLOAD FILE</button>
</div>
<div class="col-md-2">
<button class="btn btn-default">SELECT</button>
</div>
</div>
</div>
</div>
Let's assume I want the DOWNLOAD FILE button to have this property: width:50% . How can I select that particular button without giving him an id?

Answer 1

Solution 1:
Use css selector instead of IDs.
Example:
.row .col-lg-12 .row:nth-child(2) .col-md-2:nth-child(5) button.btn.btn-default {
width: 50%;
background-color: red;
color: #ffffff;
}
More: W3School.
Here is the solution(1) of your question on Codepen.
Solution 2:
Use a custom css class for the button(s).
Example:
.btn-custom {
width: 50%;
background-color: red;
color: #ffffff;
}
Here is the solution(2) of your question on Codepen.
Hope this helps.