CODEWITHSUNDEEP
htmlcss
Jorge
Jorge

Reputation: 18237

Override a css style

So I have a big trouble understanding how to override a css rule inhered, with my css rules define in some class for example

first i have this html 

<a class="formatText" style="font-weight:bold">Accesorios 4x4</a>

And I defined a class formatText like this 

.formatText{
font-size:14px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}

Never the less, because i'm using jquery-ui in some point the rule that match with the element is this 

.ui-widget-content a {
     color: black;
}

How can fixed this without defined a css selector by ID.??

Upvotes: 0

Views: 211

Answers (5)

bondythegreat
bondythegreat

Reputation: 1409

.ui-widget-content a.formatText{
   font-size:14px;
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #FFF;
}

it's a part of basic specificity rules.. you can read further in here

and avoid !important as possible as you can because it will give us headache in the future trust me. make !important as your latest arsenal when there's no hope..but as long as specificity still able to help, use it.

Upvotes: 4

Aaron
Aaron

Reputation: 5227

If you want to override a CSS style introduced later in your document with an earlier one, use the !important declaration.

e.g:

.formatText{
    font-size:14px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #FFF !important;
}

Upvotes: 0

JayC
JayC

Reputation: 7141

.ui-widget-content a.formatText {
     color: #FFF;
}

done

Upvotes: 1

Robert
Robert

Reputation: 3074

try adding a span around the text inside the a href like this

<a style="font-weight:bold"><span class="formatText">Accesorios 4x4</span></a>

Upvotes: 0

Phil Klein
Phil Klein

Reputation: 7514

You must define your style rule to be more specific than the .ui-widget-content a style rule. This could be done as follows:

.ui-widget-content a.formatText {
    ...
    color: #FFF;
}

If this is not feasible, you can also mark the setting as important:

color: #FFF !important;

Upvotes: 1

Related Questions