Recipe 1.3. Determining When to Use Class and ID Selectors

Problem

You want to determine the best use for class and ID selectors.

Solution

Use class selectors when you need to apply a style multiple times within a document and ID selectors for one-time only appearances of a style within a document.

In the following style sheet, #banner, #sub_banner, #nav1, #nav2, #footer, and #content are ID selectors and .title and .content are class selectors.

body {  margin: 0;  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: .75em;  padding: 0; } #banner {  margin-top: 0;  margin-bottom: 0;  background-color: #900;  border-bottom: solid 1px #000;  padding: 5px 5px 5px 10px;  line-height: 75%;  color: #fff; } #sub_banner {  background-color: #ccc;  border-bottom: solid 1px #999;  font-size: .8em;  font-style: italic;  padding: 3px 0 3px 10px; } #content {  position: absolute;  margin-left: 18%;  width: 40%;  top: 100px;  padding: 5px; } #nav1 {  position: absolute;  width: 30%;  left: 60%;  top: 100px;  padding: 5px; } #nav2 {  position: absolute;  padding: 5px 5px 5px 10px;  top: 100px;  width: 15%; } #footer {  text-align: center;  padding-top: 7em; } .warning {  font-weight: bold;  color: red; } .title {  font-size: 120%; } .content {  font-family: Verdana, Arial, sans-serif;  margin-left: 20px;  margin-right: 20px; } .footer {  font-size: 75%; }

Apply the ID and class selectors into the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html>  <head>   <title>CSS Cookbook</title>   <link href="1-2.css" rel="stylesheet" type="text/css" />  </head>  <body>  <div >   <h1>CSS Collection</h1>   <h2>Showcase of CSS Web Sites</h2>  </div>  <div >   <h3>Content Page Title</h3>   <p >Content Item Title</p>   <p >Content goes here.</p>  </div>  <div >   <h3>List Stuff</h3>   <a href="http://csscookbook.com/">Submit a site</a><br />   <a href="http://csscookbook.com/">CSS resources</a><br />   <a href="http://csscookbook.com/">RSS</a><br />   <h3>CSS Cookbook Stuff</h3>   <a href="http://csscookbook.com/">Home</a><br />   <a href="http://csscookbook.com/">About</a><br />   <a href="http://csscookbook.com/">Blog</a><br />   <a href="http://csscookbook.com/">Services</a><br />  </div>  <div >   <h3>Ads go here.</h3>  </div>  <div >    <p >Copyright 2006</p>   </div> </body> </html>

Discussion

The ID selectors identify unique attributes that have one instance in the document tree, whereas class selectors can be used frequently throughout the web page. Remember that ID selectors use a hash, "#", while class selectors begin with a period, ".".

Typically, web developers will use ID selectors to mark off unique sections of a web page. In the previously shown solution, notice that the page is divided into the following sections:

header
content
navigation
blipverts
siteinfo

By assigning these sections their own ID selector, designers are able to apply customized styles to those areas of the page, while keeping those same styles away from the other sections. This is accomplished through the combination of descendent selectors with ID selectors.

In the following example, the different H3 elements get different CSS rules:

#content h3 {  font-size: 2em;  font-weight: bold; } #navigation h3 {  font-size: 0.8em;  font-wieght: normal;  text-decoration: underline; }

Recipe 1.3. Determining When to Use Class and ID Selectors

Problem

Solution

Discussion

See Also