Verketten Sie mehrere CSS

Angenommen, ich habe dieses HTML:

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

Wenn ich derzeit das zweite Sub-Div erhalten möchte, kann ich dies tun:

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

Nun, wenn ich das zusätzliche Sub-Div haben möchte, kann ich das tun:

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

Nehmen wir nun an, dass das Attribut und der Wert der CSS für alle gleich sind.

Etwas wie:

width: 80px;

Was ist das CSS, das geschrieben werden muss, um all diese Divs in einem zu sammeln, anstatt mehrere CSS wie folgt zu schreiben:

ein.

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

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

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

?

Lösung des Problems

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>