Use Cascading Style Sheets Selectors

By Nicholas Chase
2004-06-18

ID selectors

Another specialty selector is the ID selector. Like the class, an ID selector is based on the value of an attribute, but in this case, it's the ID attribute. This selector is used to single out a particular element; IDs should be unique within a document. For example the following code in Listing 6 selects the span designated as bestinshow by preceding the name with a pound sign (#) and colors it red, as shown in Figure 5.

Listing 6. Using the ID selector

...

	<style type="text/css">

      * { font-family: Verdana }

      td { font-size: 10pt }

      .category { font-weight: bold; }

      td.category { font-style: italic }

      #bestinshow { color: red }

   </style>

...

Figure 5. The ID selector selects a specific element

Tutorial Pages:
» The basic page and the universal selector
» Type selectors
» Class selectors
» ID selectors
» Family relationships: descendants, children, and siblings
» Pseudo-classes and pseudo-elements
» Summary

First published by IBM developerWorks

Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS