Why is this css overriding this other one?
Question by leora
I have 2 css files in my page:
- Site.css
- 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:
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:
- Pinpoint the selector like
.ui-content-content a.closeClueTipLink - Use
!importantat the end of color defination.color: #222 !important;[not recommended]
