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