CODEWITHSUNDEEP
csshyperlink
leora
leora

Reputation: 196589

Why is this css overriding this other one?

I have 2 css files in my page:

  1. Site.css
  2. jquery-ui.css

Site.css is listed BELOW the jquery-ui css

I have a link that looks like this on my page:

 <a class='closeClueTipLink'>close</a>

and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:

enter image description here

I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.

Any ideas or suggestions why this ordering is happening ?

Upvotes: 2

Views: 151

Answers (4)

Starx
Starx

Reputation: 78991

Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.

I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.

There are ways you are amend this problem:

  1. Pinpoint the selector like .ui-content-content a.closeClueTipLink
  2. Use !important at the end of color defination. color: #222 !important;[not recommended]

Upvotes: 0

Dave
Dave

Reputation: 29131

Quick Fix:

Add an "a" before your class selector:

a.closeClueTipLink {

Explanation:

It has to do with Specificity [details].

The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'

By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.

Example:

/* css */
div p { color: red; }
p { color: blue; }

<!-- html -->
<div><p>Text</p></div>

The text in the above paragraph will be red because the first CSS item is more specific than the second.

Upvotes: 1

Turnip
Turnip

Reputation: 36682

.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.

change it to read 

a.closeClueTipLink

Upvotes: 0

BoltClock
BoltClock

Reputation: 723749

Because there's an a selector just after .ui-widget-content:

.ui-widget-content a

Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.

You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.

Upvotes: 7

Related Questions