CSS ID Selector Detailed

ID selectors allow styles to be specified in a way that is independent of the document elements.

CSS ID Selector

In some ways, ID selectors are similar to class selectors, but there are also some important differences.

Syntax

Firstly, the ID selector is preceded by a # symbol - also known as the chessboard number or hash.

Please see the following rules:

*#intro {font-weight:bold;}

Like class selectors, wildcard selectors can be ignored in ID selectors. The previous example can also be written as:

#intro {font-weight:bold;}

The effect of this selector will be the same.

The second difference is that the ID selector does not refer to the value of the class attribute, without a doubt, it refers to the value in the id attribute.

Here is an example of an actual ID selector:

<p id="intro"This is a paragraph of introduction.</p>

Try it yourself

Class selector or ID selector?

In the chapter on class selectors, we explained that classes can be specified for any number of elements. In the previous chapter, the class name important was applied to p and h1 elements, and it can also be applied to more elements.

Difference 1: Can only be used once in the document

Unlike classes, in an HTML document, an ID selector is used once and only once.

Difference 2: Cannot use ID word list

Unlike class selectors, ID selectors cannot be combined because the ID attribute does not allow a list of words separated by spaces.

Difference 3: IDs can contain more meaning

Similar to classes, IDs can be selected independently of elements. In some cases, you know that a specific ID value will appear in the document, but you do not know which element it will appear on, so you want to declare an independent ID selector. For example, you may know that there will be an element with an ID value of mostImportant in a given document. You do not know whether this most important thing is a paragraph, a phrase, a list item, or a section title. You only know that each document will have such an important content, which may be in any element, and can only appear once. In this case, you can write the following rule:

#mostImportant {color:red; background:yellow;}

This rule will match the following elements (these elements cannot appear at the same time in the same document, as they all have the same ID value):

<h1 id="mostImportant"This is important!
<em id="mostImportant"This is important!
<ul> id="mostImportant"This is important!</ul>

Try it yourself:

Case Sensitivity

Please note that class selectors and ID selectors may be case-sensitive. This depends on the language of the document. HTML and XHTML define class and ID values as case-sensitive, so the case of class and ID values must match the corresponding values in the document.

Therefore, for the following CSS and HTML, the element will not become bold:

#intro {font-weight:bold;}
<p id="Intro"This is a paragraph of introduction.</p>

Since the capitalization of the letter 'i' is different, the selector will not match the elements above.