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
Asked
Active
Viewed 36 times
0
-
I don't know what to do -- both answers are clarifying) – user3695711 Sep 19 '14 at 15:55
3 Answers
5
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.
j08691
- 204,283
- 31
- 260
- 272
-
No, this answer appeared 2 minutes later than epascarello's according to the stats – user3695711 Sep 19 '14 at 16:06
-
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*/
}
Gildas.Tambo
- 22,173
- 7
- 50
- 78
-
Do not use `:any()`. Wait for `:matches()`. See http://stackoverflow.com/questions/800779/why-cant-you-group-descendants-in-a-css-selector/11786102#11786102 – BoltClock Sep 19 '14 at 16:04
-
(There should probably be a descendant selector between the ID selector and the pseudo-class btw.) – BoltClock Sep 19 '14 at 16:05
-
-
@jo8691 Firefox and Chrome only http://css4-selectors.com/selector/css4/matches-any-pseudo-class/ – Gildas.Tambo Sep 19 '14 at 16:13
1
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 {
}
}
epascarello
- 204,599
- 20
- 195
- 236