How can I disable inherit in CSS? - css

Question

I made a tab Menu by using <ul> and <li> tags with styles. The problem is that the parent <ul>,<li>,<a> styles inherit to children. How can I disable inherit CSS?
I think I should put something like > or < but im not sure. How can I solve this problem?
<stlye>
#tabPromote li { display: inline; }
#tabPromote ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; }
#tabPromote ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px 0 0; }
#tabPromote ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; }
</stlye>
<div id="tabPromote">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="tabCont" id="tab-1">
<ul>
<li>list1</li>
<li>list1</li>
</ul>
</div>
<div class="tabCont" id="tab-2">
<ul>
<li>list1</li>
<li>list1</li>
</ul>
</div>
</div>
<script>
$('#tabPromote div.tabCont').hide();
$('#tabPromote div:first').show();
$('#tabPromote ul li:first').addClass('active');
$('#tabPromote ul li a').click(function(){
$('#tabPromote ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabPromote div.tabCont').hide();
$(currentTab).show();
return false;
});
</script>

Answer 1

You can use #tabPromote > ul and #tabPromote > ul li to limit the styling to the first level after <div id="tabPromote">.

Answer 2

To target the immediate children of a enclosing element, you can use '>'. This excludes the deeper nested elements.
Ex:
#tabPromote > ul { width:440px; height:34px; overflow:hidden; margin:0 0 30px 0; }
#tabPromote > ul li { float: left; width:210px; height:34px; padding:0 0 0 0; margin:0 10px 0 0; }
#tabPromote > ul li a { display:block; height:30px; padding:0 0 0 10px; border-bottom:4px solid #eee; font-size:16px; color:#aaa; }