jQuery: how to remove an embedded style from an element?

Question

I have a tab container using <li> as the tab definition (common practice). The <li> has a style associated with it in the style.css file. This has a background color and a background image.

Now, each container below the tabs that contain <li> in the content will have the style sheet definition (background image and color).

How do I override this in the content area using jQuery? I can't change the content because it's database driven and it's used elsewhere in the application.

Thanks!

Answer 1

I haven't tried this, but my best guess would be to add a <div> tag to the <li>, and load the content into the <div>. Then, create a definition for the <div> specifying background:none. This should then cascade down to the loaded content.

Answer 2

You don't really need jQuery for this, you could simply add a CSS declaration into your hierarchy that removes the background color and image for child li's. For example,

.tabs li { background-color: red; background-image: url(something.jpg) }

.tabs li div li { background-color: transparent; background-image: none; }

To do this with jQuery,

$(".tabs > li div li").css("background-color", "transparent");
$(".tabs > li div li").css("background-image", "none");

Answer 3

You can override the CSS by specifying more specific rules - this is bothersome because you need to unset the rules that were specified before, but it is possible.

For example if you have:

li {
   height: 100px;
}

You could unset it with:

li li {
   height: auto;
}

A better way would be to make sure the style info for the tabs only works on the tabs. If you add a class to the tab-li you can just set

li.tab {
   height: 100px;
}

and it won't influence the li elements below the tab. This way you don't have to change the content (I'm hoping the tabs aren't part of that content) and you don't have to resort to javascript to undo things.