Combine multiple selectors with the same attribute selector into one selector in CSS

Question

Is it possible in CSS/SASS/LESS to combine multiple selectors with the same attribute into one selector without repeating the attribute?

For example:

div.foo[data="123"] {
  color: red;
}

p.bar[data="123"] {
  color: red;
}

p.bar[data="123"], div.foo[data="123"]{
  color: red;
}

Combine them somehow? Such as this invalid scenario:

(div.foo, p.bar)[data = "123"] {
  color: red;
}

Answer 1

You could do it like that:

div.foo,
p.bar {
    &[data="123"] {
        color: red;
    } 
}

• first step:
  combine your main selectors
• second step:
  adds the data selector