Extend pre-existing css style name?

Posted on 2010-01-04
Medium Priority
Last Modified: 2012-05-08

I need to inherit and override a pre-existing css style definition. Somewhere there exists a style with this name:

  .gwt-TabBar.gwt-TabBarItem-selected {

and I want to extend it so that I can override its background-color attribute. How do I do that in my own css file?

Question by:DJ_AM_Juicebox
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26177248
LVL 45

Expert Comment

by:Chris Stanyon
ID: 26180328
If you include a definition in your own CSS file with a new background colour, it will override the original class rule, as long as your version comes after the original.

.gwt-TabBar.gwt-TabBarItem-selected {
     background-color: #FF000;

.gwt-TabBar.gwt-TabBarItem-selected {
     background-color: #00FF00;
The second background-color with override the first.

If the rules are in separate style sheets, then make sure you load your file AFTER the original.

<link href="original_styles.css" rel="stylesheet">
<link href="your_own_styles.css" rel="stylesheet">

Accepted Solution

Tony O'Byrne earned 2000 total points
ID: 26183609
Just writing out your new CSS declaration isn't always enough...

CSS has rules of how well something is identified.

If I have somewhere a definition:
#nav li{ background: yellow; border:1px solid blue; }

and later I want to change things for all list items:
li{ border:1px solid red }
won't work.  It'll change the li for all list items except the #nav li because #nav li is better (or more accurately) defined.

So even if you define something, that's supposed to override something else, on the very last line of your css, you can't be 100% guaranteed that it'll do the job.

!important will guarantee it.

Only use !important for those once-off events though since you can quickly lose track of what's what and why things aren't going back to the way you think they should be.

.gwt-TabBar.gwt-TabBarItem-selected {
    background-color: #FF000;

.gwt-TabBar.gwt-TabBarItem-selected {
    background-color: #00FF00 !important;

Open in new window


Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month17 days, 12 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question