I would like to disable common appearance of li elements for jQueryUI tab widget.

I have the following rule defined for common li elements at my site:

#content ul li {background:url(img/arrow02.gif) no-repeat scroll 0 6px; padding-left:15px;}

I would like to disable this rule for li elements that are used in jQueryUI tabs. I think I should specify a class on these elements and disable the rule in CSS.

<li class="tabheader"><a href="#tab1">Tab header 1</a></li>

I have tried this selector with blank rule body - does not work:

#content ul li .tabheader {  } 

I am struggling with these points:

a) selector for certain class within li element in the given path (is the posted correct?)

b) how to overwrite (disable) the background style in a subsequent CSS rule? (empty style definition did not help)

Could you please provide me advice how to solve this?

2 answers

This was chosen as the best answer


#content ul li.tabheader {
background: transparent;
padding-left: 0;

Don't use a whitespace between element and class and a blank rule won't clear css attributes, it just does nothing.

Answered about 9 years ago by ReMichael
  • Thank you for your very quick answer. The selector works, but background:transparent is not what I need. I was not clear enough - now I see that what I need to do is to ignore the "content ul li" rule at all (tested with the chrome Developer Tools - if I disable the rule, the tabs look like they should - based on the jQuery UI theme). How can I disable the rule altogether? Marek about 9 years ago
  • ReMichael answered your question correctly. To "disable" a rule, you can just delete it from the CSS. If you need to leave it in, but want to "overrule" it for certain elements, you need to write a more specific selector and restate the properties you want changed (which is exactly what ReMichael did). Doug about 9 years ago

I recommend you look into CSS specificity, if you master this, stuff like this kind won't be a problem anymore. Specificity defines things like that an ID-attribute (#) always has presedence over a class-attribute (.).

Also, if you don't want to remove the rule from the stylesheet all together, you can comment it out or reset the rules to their default state (background: none; and padding-left: 0;).

Answered about 9 years ago by Jens Hedqvist