0

I have this line of CSS from the Twitter Bootstrap, 

.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]
{
    background-image:url("http://cdn.mydomain.com/static/img/glyphicons-halflings-white.png");
}

How would I go about making that not apply to .dropdown-menu>li.disabled>a, if the disabled class is present on the li I want it to ignore/not apply that CSS. Is this easily possible?

Ben McCormick
  • 25,260
  • 12
  • 52
  • 71
Goulash
  • 3,708
  • 6
  • 29
  • 48

1 Answers1

1

You could apply the style that you want for the general case to everything, and then, lower down in your script, you could override that with another style for the "disabled" class, that mimics your default behavior.

Something like this: http://jsfiddle.net/8cQvz/1/

div{
 display:block;
 height:25px;
 width: 25px;
 background-image:url("image.png");
 float:left;
 margin:5px;
}

div.no
{
 background-image:none;
}
Ben McCormick
  • 25,260
  • 12
  • 52
  • 71
  • I've tried setting `background-image:none;` and using different background images (on the element itself even), but it always just applies both images :( – Goulash Jan 26 '13 at 03:47
  • are you applying it before or after the original CSS is applied? You'll want to place your script later. You can also override using ```!important``` but you shouldn't have to do that in this case. – Ben McCormick Jan 26 '13 at 03:49
  • Its hard to know without seeing your markup, but are you sure its applying the style to that particular dom element, and not to an child or parent of the element? – Ben McCormick Jan 26 '13 at 03:51
  • that works on my site too, but it keeps getting overwritten by a bunch of other background css styles, !important doesn't even help, is there anything else i can do? – Goulash Jan 26 '13 at 04:03
  • it works with colours just fine, but with images it still doesn't work, I tried setting `background-image: none;` on the `a` element itself, and it still shows the image above – Goulash Jan 26 '13 at 04:05
  • I think you're doing something wrong then. That should work. See here: http://jsfiddle.net/8cQvz/1/ – Ben McCormick Jan 26 '13 at 04:19
  • I got it working with this CSS: `.dropdown-menu>li.disabled>a:hover { display:inline-block;width:14px;height:14px;margin-top:1px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:none !important; background-position:14px 14px;background-repeat:no-repeat; }` Thanks for your help! :) I had the `!important` tag in the wrong place (it was on the wrong side of the semi-colon) – Goulash Jan 26 '13 at 04:26