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.
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 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.
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,
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
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.
I started using it as a learning tool, assuming I would go back to editing my CSS in my text editor - but it is just so convenient.