March 30, 2012

Why is this css overriding this other one?

Question by leora

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 ?

Answer by BoltClock

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.

Answer by Starx

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]

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!