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

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.