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

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -