Extend pre-existing css style name?

Posted on 2010-01-04
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

    LVL 42

    Expert Comment

    by:Chris Stanyon
    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">
    LVL 6

    Accepted Solution

    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

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    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…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    25 Experts available now in Live!

    Get 1:1 Help Now