css - overriding border of parent div with border of child span -
i have div has row of tabs nested within follows:
<div class="container">     <div class="menu">         <span class="tab" />         <span class="activetab" />         <span class="tab" />     </div> </div>   when tab active, need display border around it. container div has border; however, needs lighter. have this:
.container {border: 1px solid lightgray;} .activetab {border: 1px solid gray;}  it seems because container parent of active tab, border has priority, want active tab's darker border show instead. tried both borders , outlines.
help!
first of all, not sure why you're putting dot before class names in html tag..does work? should <div class="container"> , .container{....} in css.
if you're trying make css menu i'd recommend use unordered list, thats pretty standard:
<div class="container">   <ul class="menu">     <li>item 1</li>     <li class="activetab">item 2</li>     <li>item 3</li>   </ul> </div>   and in css, like:
.container {border: 1px solid lightgray;} .container ul{list-style:none;} .container li{float:left;} .container li.activetab {border: 1px solid gray;}      
Comments
Post a Comment