CSS ID Selectors

You can assign a unique identifier to an HTML element, then style that element by referencing its unique identifier. This allows you to define a style that can only be used by the element you assign the ID to.

Any HTML element can have the id attribute applied to it. The value of this attribute is the element's unique identifier. For example, <h1 id="mainHeading"> gives that element a unique identifier of mainHeading.

We can reference that ID from within our CSS code.

CSS ID Syntax

The syntax for declaring a CSS ID is the same as for classes, except that instead of using a dot, you use a hash (#).

Again, similar to classes, if you want to use the same id name for multiple elements, but each with a different style, you can prefix the hash with the HTML element name.

CSS ID Example

<!DOCTYPE html>
<title>Example</title>
<style>
  div#css-section { 
    border:1px dotted red; 
    padding: 20px;
    }
</style>
<div id="css-section">
  This lucky div has ID...
</div>
<div>
  This poor div has no ID...
</div>

IDs vs Classes

Given classes and IDs are very similar, you may be wondering which one to use. This depends on the situation.

When to use classes

You should use classes when your style needs to be applied multiple times on the same page. For example, you might have many <h1> elements that need the same style applied.

When to use IDs

You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a <nav> tag which contains your left menu. The styles for this ID could contain the position, background-color, float properties, size etc. You probably wouldn't want any other element on the page to use this particular style.

Another useful thing about IDs is that you can use the Document Object Model (DOM) to refer to them. This enables you to use JavaScript/DHTML techniques to build a much more interactive web site.

However, there's a school of thought within the developer community that frowns upon ID selectors. In fact, some developers state that you should "never, ever use ID selectors".

This is a decision that you will need to make. It is quite possible (and common) to develop a website without using ID selectors.

More Selectors

We've only covered a few of the most common selectors. CSS includes many more selectors thay you can use when selecting an element for styling.

Here are some of the things you can do with selectors:

Select only those elements that have a certain attribute.
Select a certain element that has a certain attribute with a certain value.
Select a specific element, but only when it's inside another, specific element.
Select only the first child of a specific element.
Select only the last child of a specific element.
You can even specify which child (eg, the 3rd child, or the 4th, the 5th... etc).
Select an element only when it's being hovered over.
Much more.

Here's a full list of CSS selectors.

Bookmark that page, or keep a copy. When coding CSS, you will often find yourself searching for a suitable selector to use. With recent additions to CSS, there are now over 70 selectors, so a list like that can be very handy.