Collected by
Elizabeth Janson
Home Page

Using ID

The ID Selector - three descriptions, take your pick

Opinion One

Document languages may contain attributes that are declared to be of type ID. Java script uses ID to name each item it relates to. What makes attributes of type ID special is that no two such attributes can have the same value in a document, regardless of the type of the elements that carry them. Whatever the document language, an ID attribute can only be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies.

The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. In the following example, the style rule matches the element that has the ID value "z98y". The rule will thus match for the P element:

<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
    *#z44y { letter-spacing: 0.3em; color:blue; }
</STYLE>
</HEAD>
<BODY>
<P id=z44y>Wide text</P>
</BODY>

Wide text

and try to use ID again with

<H2 id=z44y>Repeated ID</H2>

Repeated ID

In the next example, however, the style rule will only match an H1 element that has an ID value of "z98y". The rule will not match the P element in this example:

<HEAD>
<TITLE>Match H1 only
<STYLE type="text/css">
    H1.#z98y { letter-spacing: 0.5em; color:green; }
</STYLE>
</HEAD>
<BODY>
<H1 id=z98y>Wide text</H1>
</BODY>

Wide text

ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.

The ID Attribute

Opinion Two

The ID attribute is used to define a unique style for an element. A CSS rule such as

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>

Welcome to the Web Design Group!

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

The use of ID is appropriate when a style only needs to be applied once in any document.
ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

Opinion Three quotes Joe Burns of Htmlgoodies fame,

What About Those IDs?

The ID command works exactly the same way as the CLASS command. The reason it exists is to allow you to incorporate these Style Sheet models into JavaScript or DHTML. So, unless you are attempting to use these with JavaScript, stick with the CLASS command. You can use the ID command, but it won't do anything different or better than the CLASS command. In case you want to give it a whirl, here's how to use it.

The ID and the CLASS formats can be used on the same page. I'm using both on this page, with the same codeword.

In the Style section of your <HEAD> command, denote the ID by a hash mark (#) and a codeword, like so:

#pumpkin { font-family: arial; font-size: 20; font-style: bold; color: orange }
.pumpkin { font-family: arial; font-size: 20; font-style: bold; color: orange }

From that point on, it's the same format as the CLASS commands, like so:

<P ID="pumpkin">This is the text result with ID</P>

Here's what you get:

This is the text result with ID

<P ALIGN="right" class="pumpkin">This is the text result with CLASS</P>
gives you this:

This is the text result with CLASS

Email
CSS begins here

Back to element selectors or on to CLASS

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.