Extend pre-existing css style name?

Hi,

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?

Thanks
DJ_AM_JuiceboxAsked:
Who is Participating?
 
Tony O'ByrneSenior Web DeveloperCommented:
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

0
 
Gurvinder Pal SinghCommented:
0
 
Chris StanyonCommented:
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">
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.