Concatenate multiple CSS

Question

Say I have this html :

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;
}

?

user_14807111 · Answer

div >

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


    1
    2
    3

Ends with '-div':

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

user_12402732 · Answer

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;
}


    1
    2
    3

user_13429655 · Answer

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;
}

user_5408747 · Answer

The question is not so clear.

I assume the most appropriate for you is to select the first level of of divs like:

 .div > div {
    width: 80px;
}

or if you want the first three items

.div div:nth-child(-n+3) {
    width: 80px;
}

Anyway, there are a lot of sites which can help you with tips in css: ex:

https://css-tricks.com/useful-nth-child-recipies/

user_16734128 · Answer

.div div{
   width: 80px;
}

This CSS will select .div .sub-div:nth-child(1), .div .sub-div:nth-child(2), .div .extra-sub-div with

user_14776809 · Answer

I would personally just add another class into the child div-elements, separated with a space. This way you're not targetting all of the child div-elements, but only the ones with this exact class.

This is good if you have child elements in the parent div and you don't want them to have the styling from the .red-class-class:

.red-class {
  color: red;
}


  text
  text
  text
  text

Concatenate multiple CSS

6 Answers