If I have the following HTML structure :
<div class="div">
<div class="sub-div"></div>
<div class="sub-div"></div>
<div class="extra-sub-div"></div>
</div>
To target the second sub-div, we can use the following CSS :
.div .sub-div:nth-child(2) {
attribute: value;
(...)
}
Similarly, to style the extra sub-div, we would use this CSS rule :
.div .extra-sub-div {
attribute: value;
(...)
}
But what if we want all these divs styled with the same attribute and value?
Say, for example, we want them all to have a width of 80px.
Instead of writing separate CSS rules for each individual div like such :
1.
.div .sub-div:nth-child(1) {
width: 80px;
}
.div .sub-div:nth-child(2) {
width: 80px;
}
.div .extra-sub-div {
width: 80px;
}
Is there a way to combine all these divs into one CSS rule?