Concatenate multiple CSS

Question

Say I have this html :

<div class="div">
    <div class="sub-div"></div>
    <div class="sub-div"></div>
    <div class="extra-sub-div"></div>
</div>

Currently if I want to get the second sub-div, I can do this :

.div .sub-div:nth-child(2) {
  attribute: value;
  (...)
}

Now, if I want the extra sub-div, I can do this :

.div .extra-sub-div {
  attribute: value;
  (...)
}

---

Now let's assume the attribute and value of the css is the same for all.

Something like :

width: 80px;

What is the css to write to gather all these div in one, instead of writing multiple css like this :

1.

.div .sub-div:nth-child(1) {
  width: 80px;
}

.div .sub-div:nth-child(2) {
  width: 80px;
}

.div .extra-sub-div {
  width: 80px;
}

?

Answer 1

div >

.div > div {
  color: red;
  width: 80px;
}

<div class="div">
    <div class="sub-div">1</div>
    <div class="sub-div">2</div>
    <div class="extra-sub-div">3</div>
</div>

Ends with '-div':

div[class$="-div"] {
  color: green;
  width: 80px;
  background: yellow;
}

<div class="div">
    <div class="sub-div">1</div>
    <div class="sub-div">2</div>
    <div class="extra-sub-div">3</div>
  <div class="extra-sub-no">4</div>
</div>