css selector wrapping / grouping?

Question

is there a way to group multiple selector like this:

[data-my-attribute]{

.prop1{}
.prop2{}
.prop3{}

}

the @media is a kind of grouping. But i want it only to work on some specific children. I'm not interested in the .class1, .class2, .class3{} syntax

is there any way i can combine a @media and [data-] ?

The thing is that in this case, i dont have controlle over .prop1,2,3.. since they come from other people. I need a way to group them.

I tried several google searches with no luck.

Can it be done? :)

I don't know this syntax. can you please explain it a bit more? :) — Martin Bidstrup Andersen, Dec 15 '17 at 12:53
You should read manuals like [This](https://www.w3schools.com/cssref/sel_attr_begin.asp) — Mohammad Usman, Dec 15 '17 at 12:55

score 0 · Answer 1 · answered Dec 15 '17 at 12:30

Not with CSS.

You can however use SASS or LESS to organize your styles in this manner, but you would need to use a compiler to generate actual CSS from those files.

For example, with SASS you can do the following:

[data-my-attribute] {
  .prop1{
    color: blue;
  }
  .prop2{
    color: red;
  }
  .prop3{
    color: green;
  }
}

Which compiles to:

[data-my-attribute] .prop1 {
  color: blue;
}  

[data-my-attribute] .prop2 {
  color: red;
}

[data-my-attribute] .prop3 {
  color: green;
}

css selector wrapping / grouping?

1 Answers1