CODEWITHSUNDEEP
jquerycss
Tyler Durden
Tyler Durden

Reputation: 2171

Different css in a div

Here's this row from a jquery css:

.ui-widget-header {
    border: 1px solid #e78f08; 
    background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; 
    color: #ffffff; 
    font-weight: bold;
}

I'd like to change the background to none, but just in the smalltabs div. This doesn't work however (I just tried to copy the line):

#smalltabs {
    border: none;
    padding: 0;
    .ui-widget-header {
        border: 1px solid #e78f08;
        background: none;
        color: #ffffff;
        font-weight: bold;
    }   
}

Upvotes: 0

Views: 84

Answers (3)

Kevin Walter
Kevin Walter

Reputation: 7166

This should do the trick.

    #smalltabs {
border: none;
padding: 0;
.ui-widget-header { border: 1px solid #e78f08; background: transparant; color: #ffffff; font-weight: bold; }   
}

It also can be the case that it is being overruled. If so, try this

    #smalltabs {
border: none;
padding: 0;
.ui-widget-header { border: 1px solid #e78f08 !important; background: transparant !important; color: #ffffff !important; font-weight: bold !important; }   
}

EDIT: My bad i was thinking about background-color. Try this: 

        #smalltabs {
border: none;
padding: 0;
.ui-widget-header { border: 1px solid #e78f08 !important; background: none !important; color: #ffffff !important; font-weight: bold !important; }   
}

Upvotes: 0

Liauchuk Ivan
Liauchuk Ivan

Reputation: 1993

#smalltabs {
    border: none;
    padding: 0;
    background: none;
}

Upvotes: 0

Anton
Anton

Reputation: 32581

Try this using important and correcting the selector

   #smalltabs {
       border: none;
       padding: 0;
   }
    #smalltabs .ui-widget-header {
     border: 1px solid #e78f08;
     background: none !important;
     color: #ffffff;
     font - weight: bold;
 }

Upvotes: 1

Related Questions