The ID selector

We started the Selector-part of this tutorial with the most wide-ranging selector, which targets elements, then we talked about the more specific class-type selector, and now we'll be discussing the most specific selector type: The ID selector. The ID selector is actually so specific that it only targets a single element on the page!

Just as we saw with the class selector, the ID selector uses a specific attribute found on all HTML tags to figure out whether the specific rule applies to the element or not, and that's the ID attribute. The value of the ID attribute should be unique, according to the HTML specification, meaning that it can only be used on a single element per page. As a consequence of that, a CSS ID selector should also be used only when you need to target one, specific and unique element on a page.

An ID selector looks just like a class selector, but instead of having a dot as the prefix, it uses the hash sign (#). Let's see how it works:

<style type="text/css">
#main-header {
	color: GreenYellow;
}
</style>

<h1 id="main-header">Hello, CSS!</h1>

As you can see, it works just like classes, but instead of using a dot, we use a hash character, and instead of using the class attribute, we use the id attribute - the difference lies in the fact that the ID should be unique, as explained in the introduction to this chapter.

So why use ID selectors at all? Well obviously, no one will be forcing you - you may use class selectors instead, if you want to. But by using an ID selector, you specify to yourself and everyone else who will be writing markup for your CSS, that the selector should only be used in one single place. This is often used for main page elements, e.g. the tags that creates the structure of the page (menu, side box, main content and so on).

Besides that, you may already have specified ID's for some of your tags, e.g. to reference them from JavaScript code. If so, you may write a CSS ID selector and have it applied automatically.

Element specific ID selectors

Just like the class selector, you may limit an ID selector to a specific element type by putting the name in front of the selector name, like this:

h1#main-header {
	color: GreenYellow;
}

With that in place, this specific ID selector will only apply to a header (h1) tag.

Summary

With the ID selector, you get really specific - from targeting all elements by name/type or class name, the ID selector, by design, only targets a single element on the page. Use it mainly for the larger, structural elements on your page, e.g. the navigation, top area, main content and so on.