CSS ID Selector

ID Selector

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The ID selector is defined as "#".

The following two ID selectors, the first one can define the color of the element to be red, the second defines the color of the element as green:

#red{color:red;} #green {Color:green;}

In the following HTML code, the P element with the ID property of red is shown in red, and the P element with the id attribute green is shown in the blue.

id="red"id="green"> This paragraph is green. </p>

Note: The id attribute can only appear once in each HTML document. Want to know why, see XHTML: Site refactoring.

ID selector and Derivation selector

In modern layouts, ID selectors are often used to establish derived selectors.

#sidebar p{font-style:italic;text-align:right;margin-top:0.5em;}

The above style will only apply to paragraphs that appear in an element with an ID of sidebar. This element is most likely a div or a table cell, although it may also be a table or other block-level element. It can even be an inline element, such as <em></em> or <SPAN></SPAN>, but this usage is illegal because it is not possible to embed <p> in inline element <span> (If you forget the reason, see XHTML: Site refactoring).

A selector, multiple usages

This ID selector can be used many times as a derived selector, even if the element labeled Sidebar only appears once in the document:

#sidebar p{font-style:italic;text-align:right;margin-top:0.5em;} #sidebar h2 {font-size:1em;font-weight:normal;font-style:italic;margin:0;line-height:1.5;text-align:right;}

In this case, unlike other p elements in the page, the P element in the sidebar is handled in a special context, and, unlike all the other H2 elements on the page, the H2 elements in the sidebar are treated differently.

Separate selector

The ID selector can work independently even if it is not used to create a derived selector:

#sidebar{border:1px dotted #000;p adding:10px;}

According to this rule, an element with ID sidebar will have a pixel-wide black dot border with a width of 10 pixels (padding, internal whitespace) around it. Older versions of the Windows/ie browser may ignore this rule unless you specifically define the element to which this selector belongs:

div#sidebar{border:1px dotted #000;p adding:10px;}

CSS ID Selector Detailed

• CSS class Selector detailed
• CSS Property Selector Detailed

The ID selector allows you to specify a style in a way that is independent of the document element.

CSS ID Selector

In some ways, the ID selector is similar to a class selector, but there are some important differences.

Grammar

First, there is a # number in front of the ID selector-also known as a checkerboard number or a pound sign.

Take a look at the following rules:

* #intro {font-weight:bold;}

Like the class selector, a wildcard selector can be ignored in the ID selector. The previous example can also be written:

#intro {font-weight:bold;}

The effect of this selector will be the same.

The second difference is that the ID selector does not reference the value of the class attribute, and there is no doubt that it refers to the value in the id attribute.

The following is an example of an actual ID selector:

Id= "Intro" >this is a paragraph of introduction.</p>

Try it yourself.

Class selector or ID selector?

As we have explained in this chapter of class selectors, you can specify classes for any number of elements. The class name important in the previous chapter is applied to the p and H1 elements, and it can also be applied to more elements.

Difference 1: Can only be used once in a document

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

Difference 2: Cannot use ID word list

Unlike class selectors, ID selectors cannot be used in conjunction because the ID attribute does not allow a space-delimited list of words.

Difference 3:id can contain more meanings

Similar to a class, you can select an ID independently of the element. In some cases, you know that a particular ID value appears in your document, but you do not know which element it will appear on, so you want to declare a separate ID selector. For example, you might know that there is an element with an ID value of mostimportant in a given document. You don't know whether the most important thing is a paragraph, a phrase, a list item, or a section heading. You only know that each document will have one of the most important things, it may be in any element, and only one can appear. In this case, you can write the following rules:

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

This rule matches each of the following elements (these elements cannot be present in the same document because they all have the same ID value):

Id= "Mostimportant" >this is important!</ul>

Try it yourself:

• Set style for H1 element with ID mostimportant
• Set the style for an EM element with ID mostimportant
• Set the style for UL elements with ID mostimportant

Case sensitive

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 does not become bold:

Id= "Intro" >this is a paragraph of introduction.</p>

Because the case of the letter I is different, the selector does not match the above element.

CSS ID Selector