CODEWITHSUNDEEP
cssinheritance
user1833620
user1833620

Reputation: 781

How can I disable inherit in CSS?

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><a href="#tab-1">tab1</a></li>
        <li><a href="#tab-2">tab2</a></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>

Upvotes: 1

Views: 3660

Answers (2)

art-fan-vikram
art-fan-vikram

Reputation: 315

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;  }

Upvotes: 1

Romain Paulus
Romain Paulus

Reputation: 2368

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

Upvotes: 2

Related Questions