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;
}
?
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>You can use , for each element you need like:
.div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div {
width: 80px;
color:red;
}<div class="div">
<div class="sub-div">1</div>
<div class="sub-div">2</div>
<div class="extra-sub-div">3</div>
</div>When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the width of something to 80px, for example), you use a single CSS rule that accomplishes the same thing.
To group CSS selectors in a style sheet, use commas to separate multiple grouped selectors in the style.
.div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div {
width: 80px;
}