The id selector

The difference between the Class Selector and ID Selector is initially confusing. I like to think of the ID Selector as being a way of designating an area or block that can have a unique set of custom classes and HTML tags separate from the rest of the page.

Have you ever thought it would be useful to have different link colors on the same page as in the table below?

This little CSS trick makes for a good introduction to creating and utilizing ID Selectors.

Creating the ID Selectors

In the above example, we have a two cell, one row table where the left cell has blue links (and a red hover) and the right cell has red links (and a blue hover). To create the effect, we need to treat the left cell and right cell differently by assigning each <td> tag a unique ID Selector. We'll keep this very simple and call the left table cell "left" and the right table cell "right."

Here's how we start the CSS code:

Note immediately that there is something different here: ID Selectors utilize the pound sign (#) instead of a period (.) like the Class Selectors.

Here we have identified two ID Selectors: #left and #right which we will need to define and then apply to the designated areas in our Web page.

Applying the ID Selectors

We apply the ID Selectors to their respective <td> tags by utilizing the id= attribute:

<table>
 <tr>
   <!-- The left table cell -->
   <td id="left"></td>
   <!-- The right table cell -->
   <td id="right"></td>
 </tr>
</table>

Defining the ID Selectors

We define the various styles associate with each ID Selector as we normally would except the difference is that we preface each declaration with the #idselector (followed by a space) as below:

<style type="text/css">
<!--
  #left a:link { color: blue }
  #left a:visited { color: blue }
  #left a:hover { color: red }

  #right a:link { color: red }
  #right a:visited { color: red }
  #right a:hover { color: blue }
-->
</style>

This produces the desired result:

This may seem awfully redundant but it must be remembered that using ID Selectors is a way in which we can define a set of custom styles for various areas (or blocks) within one Web page.

Taking It Further

We can take this technique further by declaring more style definitions for each ID Selector be they generic, for specific tags, or for custom classes. Here is a new set of ID Selectors with many associated styles:

<style type="text/css">
<!--
  #left2 a:link { color: blue; text-decoration: underline }
  #left2 a:visited { color: blue; text-decoration: underline }
  #left2 a:hover { color: red; text-decoration: overline }
  #left2 { background-color: mistyrose }
  #left2 strong { font-face: Courier New, Courier, monospace }
  #left2 .small { font-size: 10pt; color: gray }

  #right2 a:link { color: red; text-decoration: underline; font-style: italic }
  #right2 a:visited { color: red; text-decoration: underline; font-style: italic }
  #right2 a:hover { color: blue; text-decoration: none; font-style: italic }
  #right2 { background-color: linen }
  #right2 strong { font-family: Times New Roman, Times, serif }
  #right2 .small { font-size: 9pt; color: green }
-->
</style>