Home/ Questions/Q 7736483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:44:34+00:00

I have 2 css files in my page: Site.css jquery-ui.css Site.css is listed BELOW

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0