Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

complete css guide

ID selectors

Browser support

Get browser support information for id selectors in the downloadable version of this guide or our browser support tables.

Explanation

ID selectors are a lot like class selectors. They work in a very similar way, and have a similar syntax. The essential difference is that while class selectors apply to one or more elements on a page, ID selectors apply to exactly one element.

For example, while you can have many lists of ingredients, you might have only one main title.

Given how class selectors work you may find yourself questioning the need for ID selectors at all. It's a good question, but the best answer to it is an unsatisfying "because they're there". The fact is that the ID attribute exists in HTML 4, so there's no reason not to use it in a CSS selector. As we talk about below, the ID attribute and selector has come to be widely used in CSS positioning.

Syntax

As just noted, the syntax for the ID selector is much like that for the class selector. Again there are two kinds of selector, those associated with a particular type of element, and the more general selector that can apply to any element with an ID that matches the ID of the selector. We'll see shortly what it means for an element to have an ID.

Solitary ID selectors

ID selectors that can apply to any type of element have the simple syntax #idname, for example, #title. This selector selects the single element on a page that has an ID of "title".

ID selectors

ID selectors that apply only to a particular type of element (for instance only headings of level one or paragraphs) have the syntax element-name#idname, for example h1#title. This selector selects the single heading of level 1 with an ID of "title". It will not select any other element with that ID, nor will it select any other headings of level 1.

Note that an ID comprises only alpha numeric characters, and hyphens. They cannot include underscores and other characters, nor spaces. An ID cannot begin with a numeral.

Use

We've already mentioned that ID selectors, like the ID attribute, are kind of redundant when you consider that you already have class selectors and the class attribute.

We saw in the section on class selectors that HTML 4.0 introduced the class attribute. HTML elements can have classes, and to give an element a class, you add the attribute class to the opening tag for that element like this, <p class="introduction">.

IDs are very similar.

HTML 4.0 introduced the ID attribute, which is given to an element in a very similar way, by adding the ID attribute to the element tag. For example, to give a heading an attribute of title, you use the following tag, <h1 id="title">. Note that in any valid HTML document there should only be one heading 1 with an ID of title.

To select this <h1> then you would use the selector h1#title.

One area in which ID selectors have become the de facto standard though is in CSS positioning, even though you could do exactly the same thing with classes. Because positioned elements are very often unique on each page, they are distinguished from each other using ID attributes. Then, in the style sheet they are selected with ID selectors.