Question

I have a div that has a row of tabs nested within it as follows:

<div class="container">
    <div class="menu">
        <span class="tab" />
        <span class="activetab" />
        <span class="tab" />
    </div>
</div>

When a tab is active, we need to display a border around it. The container div also has a border; however, it needs to be lighter. So we have something like this:

.container {border: 1px solid lightgray;}
.activetab {border: 1px solid gray;}

It seems that because the container is a parent of the active tab, its border has priority, but we want the active tab’s darker border to show instead. We tried both borders and outlines.

Help!

Answer 1

First of all, not sure why you’re putting a dot before the class names in the html tag..does that even work? It should look like <div class="container"> and then .container{....} in the CSS.

If you’re trying to make a CSS menu then I’d recommend you use an 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 then in your CSS, something like:

.container {border: 1px solid lightgray;}
.container ul{list-style:none;}
.container li{float:left;}
.container li.activetab {border: 1px solid gray;}