Specifying Selectors

Div ids and div classes help you to keep your site organized, and knowing how to be specific can really give you a lot of flexibility with your website designs. The rule of thumb is to use a div id only once in your html, but you can use a div class multiple times. This can be confusing to learn when you are new to CSS, but I will show you a real world scenario where this applies. This will not only save you time, but will make styling your site quick and easy.

In the example below, we have 2 menus stacked on top of each other. Normally you wouldn't do this, but for illustration purposes, I will show you how you can target a class inside of a div, add a few changes, giving you a different menu without having to rewrite all the CSS all over again.

The HTML

 <div id="container">
    <div id="header">
    <h1>Lovely Fruit</h1>
    <p>Nature's Goodness</p>
    </div>
    <div class="menu">
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#" id="current">Fruit</a>
                <ul>
                    <li><a href="#">Apples</a></li>
                    <li><a href="#">Oranges</a></li>
                    <li><a href="#">Bananas</a></li>
                    <li><a href="#">Pears</a></li>
               </ul>
          </li>
            <li><a href="/about.html">About</a>
                <ul>
                <li><a href="#">Company Info</a></li>
                <li><a href="#">Locations</a></li>
                <li><a href="#">FAQ</a></li>
                </ul>
          </li>
            <li><a href="/contact/contact.php">Contact Us</a></li>
        </ul>
    </div><!--closing div class for "menu"-->
    <div id="section2">
    <div class="menu">
    <ul>
        <li><a href="#" >Home</a></li>
        <li><a href="#" id="current">Nature</a>
            <ul>
                <li><a href="#">Life</a></li>
                <li><a href="#">Health</a></li>
                <li><a href="#">Taste</a></li>
                <li><a href="#">Preparation</a></li>
            </ul>
        </li>
            <li><a href="/about.html">Grow Your Own</a>
                <ul>
                <li><a href="#">Pests</a></li>
                <li><a href="#">Locations</a></li>
                <li><a href="#">Harvesting</a></li>
                </ul>
            </li>
            <li><a href="#">Vision</a></li>
        </ul>
    </div><!--closing div for "menu/sidebar"-->

    </div><!--closing div for "sidebar"-->

    </div><!--closing div for "container"-->

The CSS

#container    {
    width:1024px;
    background: #CCC;
    height:400px;
    margin:auto;
}
#header h1{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-style: italic;
    color: #069;
    text-decoration: none;
    padding-left: 35px;
}
#header p {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    padding-left: 35px;
}
.menu{
    width:960px;
    border:none;
    border:0px;
    margin:auto;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#F93;
    height:50px;
    list-style:none;
    margin:0;
    padding:0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
    -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
    box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
    }
.menu li{
    float:left;
    padding:0px 0px 0px 15px; 
    }
.menu li a{
    color:#000;
    display:block;
    font-weight:normal;
    line-height:50px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
.menu li a:hover{
    background:#C60;
    color:#FFFFFF;
    text-decoration:none;
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    }
.menu ul li:hover a{
    background:#C60;
    color:#FFFFFF;
    text-decoration:none;
    }
.menu li ul{
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:200px;
    z-index:200;
    }
.menu li:hover ul{
    display:block;      
    }
.menu li li {
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
    background:#F93;
    /*this is where the rounded corners for the dropdown disappears*/
    }
.menu li:hover li a{
    background:none;
    }
.menu li ul a{
    display:block;
    height:50px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
.menu li ul a:hover, .menu li ul li:hover a{
    border:0px;
    color:#ffffff;
    text-decoration:none;
    background:#C60;
    -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
    box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3); 
    }

/*start section2*/
#section2    {
    width:960px;
    margin:auto;
}
#section2 .menu {
    border-radius:none;
    background:#069;

}
#section2 .menu ul {
    border-radius:none;
    background:#069;
    box-shadow:none;
}
#section2 .menu li {
    border-radius:none;
    background:#069;

}
#section2 .menu li a{
    color:#ccc;
    }
#section2 .menu li a:hover{
    background:#336;
    color:#FFFFFF;
    }
#section2 .menu ul li:hover a{
    background:#336;
    color:#FFFFFF;
    }
#section2 .menu li ul{
    }
#section2 .menu li:hover ul{
    display:block;      
    }
#section2 .menu li li {
    background:#069;
    /*this is where the rounded corners for the dropdown disappears*/
    }
#section2 .menu li:hover li a{
    background:none;
    }
#section2 .menu li ul a{
    }
#section2 .menu li ul a:hover, .menu li ul li:hover a{
    border:0px;
    color:#ffffff;
    background:#336; 
    }
/*End of section2 menu*/

The Result

I know that this is a lot of code, but it really isn't if you break it down. I mainly compied and pasted the menu CSS styling, and for everything inside of the section2 div, I added #section2 and a space in front of the menu class. I stripped all of the CSS out of these, and the only changed I made were to the colors of the menu, and I specified that there was no border radius on the second menu.

#section2 .menu {
    border-radius:none;
    background:#069;    
}

I also removed the inset border radius that gives the top menu a slight "2.0 sheen" that is popular today. I went through and changed all of the highlight and hover states for the second menu, but you will notice that I didn't have to specify any of the details that I didn't want to change. The hover states inherit the inner shadow from the first menu.

I also specified the h1 tags for the header, and the p tag for the short blurb of text directly under it. Later, if I add another p tag, or another h1 tag, I can refer to the div that contains these tags, and style them differently from the ones in the header. This gives you ultimate flexibility when styling your websites and different areas of content

#header h1{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    font-style: italic;
    color: #069;
    text-decoration: none;
    padding-left: 35px;
}
#header p {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    padding-left: 35px;
}