How do I override earlier styles in my CSS stylesheet?
Asked by
vekteur (
107
)
July 21st, 2010
One of the objects in a group of objects needs to be different. I added the unique styles for this object after the styles that apply to the main group but the unique style is not showing up. In firebug the unique selector is showing up for the element but it’s all crossed out and the main group selector is being used. Any ideas?
Observing members:
0
Composing members:
0
10 Answers
Thanks that works – but is there a way to do this in the stylesheet? I’m just confused since the selector is there and shows up in firebug but doesn’t get applied.
Like this?
<html>
<head>
<title>Testing Style Override</title>
<style type=“text/css”>
body {color: red;}
.headlines {color: blue;}
</style>
</head>
<body>
This should be red<br />
<div class=“headlines”>This should be blue<br /></div>
</body>
</html>
you can always use the important tag. this will stop anything from overwriting that specific attribute. For example.
.class{ background:white !important; }
once that has been declared, nothing can override the white background.
@vekteur Welcome to Fluther. It’s great to have another HTML coder join us.
Your new style was a victim of inheritance. Read up on CSS inheritance. As @jaytkay noted, you could use a local style. If this uniquely styled element is going to show up in lots of places, you could give it its on class that would be added to the class of the main group. Just see that it ocurrs below your main group’s style in your style sheet so its inheritance rules.
I believe this is also a specificity issue. You can read about specificity here and here. In other words, styles for “div span.class” will overwrite styles for “div .class”, regardless of which came first, because the first has a more specific selector.
The easiest solution would be to add the !important declaration to the style. Otherwise, just make sure that you’re as specific as possible when trying to overwrite another style because the order they’re defined doesn’t always matter.
As people have pointed out, !important is the quick solution to your problem. Specificity is a slightly better solution. Bear in mind that stylesheets with too many !important declarations or overly specific selectors designed to override prior declarations quickly get disorganized and hard to read. My advice is to work with the cascade. Reorganize your stylesheet so that the more general declarations are closer to the top and the more specific ones closer to the bottom. Not only does CSS then naturally apply styles in an order that makes sense (starting at the top, with later more specific styles overriding the previous more general ones) but it’ll be easier for you to go back later on and understand what you’ve written.
Thanks for all the great answers! As my old English teacher once said: if your writing is B.S. it means you need to “be specific.” Apparently it applies to coding as well.
@vekteur Boy does it ever. I keep waiting for computer technology to advance to the point where the “Do what I meant, not what I said.” instruction works.
Response moderated (Spam)
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
