overriding border of parent div with border of child span

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

Your main issue with this your class attributes. Don't put . in the HTML:

<div class=".container">

Should be

<div class="container">

After that, you shouldn't have any problem with the border-color values. As long as your selectors are explicit, and not general, there will be no confusion:

.container { border:1px solid red;   }
.activetab { border:1px solid green; }

That should render properly. But remember, classes are only prefixed with a . (dot) in your selectors, not your HTML.

Answer 2

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