I have 3 DIV Elements on a website and this CSS:
#box-left, #box-middle, #box-right a {
text-decoration:none;
color:#000000;
}
it only seems to be working on the #box-right element though.
Any ideas?
Add a comment
|
3 Answers
You have to put
#box-left a, #box-middle a, #box-right a {
text-decoration:none;
color:#000000;
}
Each value on the comma separator list is a selector on its own, it is not combined with the next elements:
#foo, .class p, #bar p:first-child a {
something;
}
is equivalent to
#foo {
something;
}
.class p {
something;
}
#bar p:first-child a {
something;
}
3 Comments
Abijeet Patro
If you want to apply the styles to the anchor tags inside every div, then this is the right way to do it. Better would be to give them a class.
James Donnelly
Adding a class wouldn't necessarily make it "better", @AbijeetPatro. You could always combine all three into
[id^="box-"] a { } if you really wanted to.
FelipeAls
I think he meant "better" for web performance (for sure) and maybe maintenance. There's no "better" way of doing things in CSS in absolute terms. There are half a dozen ways to style anything and then the choice is done on what you know, what you want to achieve, which browsers you support, what you care about (accessibility in my case and only then maintenance or webperf), what the client want/know/will do with your code, etc etc
Try
#box-left a,
#box-middle a,
#box-right a {
text-decoration:none;
color:#000000;
}
because it is for all div's anchor tag.
It is better to give a anchor tag class and apply that class directly.
Comments
You haven't put the element a to your selector, to understand well your css if you have to conatenate more than a div or a class consider to make a new paragraph to understand well your code like this:
#box-left a,
#box-middle a,
#box-right a {
text-decoration:none;
color:#000000;
}
answered Aug 2, 2013 at 8:48
Alessandro Minoccheri
36.1k22 gold badges128 silver badges176 bronze badges