Is it right to list several elements within the same id separated by commas?

Question

I am wondering is it right to format CSS styles like this if link1,2,3 classes are within #cont id?

#cont .link1, .link2, .link3

Thanks

Answer 1

No, you want to use:

#cont .link1, #cont .link2, #cont .link3

Otherwise, only the first one will target elements with the class link1 that are descendants of the element with the ID cont, while the last two will target all elements that have the class link2 and link3.

Answer 2

You can use CSS Selectors Level 4 :matches or :any in the near future

#cont:matches(.link1, .link2, .link3) {
  /* This is an experimental technology*/
}


#cont:-moz-any(.link1, .link2, .link3) {
  /* This is an experimental technology*/
}

Answer 3

Your code is the same thing as

#cont .link1 {}
.link2 {} 
.link3 {}

You are stuck with copying the selector over and over again.

#cont .link1,
#cont .link2, 
#cont .link3 { }

There is no short cut in CSS to have nesting. LESS and SASS have that ability.

---

Example with Less would be

#cont {
    .link1, .link2, .link3 {

    }
}