The #id Selector in CSS, Explained

Learn everything you need to know about the #id selector in Cascading Style Sheets (CSS).

Published Categorized as CSS

With the #id selector in CSS, you can select and style an HTML element based on the value of its id attribute.

The id attribute must be unique in your HTML document. If multiple DOM elements have the same id, the browser will apply the style only to the first DOM element that matches the pattern.

Read below for a real-world example of using the #id selector in your CSS style sheets.

How to Use the Id Selector in CSS

Say you have the following HTML document:

<!-- Regular paragraph -->
<p>This is a regular paragraph.</p>

<!-- Special paragraph -->
<p id="special-paragraph">This is a paragraph with its own id.</p>

As you can see from the source code above, there are two paragraphs in your HTML document.

One paragraph is in a regular <p> tag, and the other in a <p> tag with an id of special-paragraph. You can style the second paragraph using the #id selector in CSS.

#special-paragraph {
    color: blue;
}

The #id selector in CSS is supported by all major browsers, including, but not limited to, Google Chrome, Firefox, Microsoft Edge, Safari, and Opera. (For detailed information on browser support, refer to the #id selector specs at CanIUse.com.)

Keep learning: The Simple Guide to Complex CSS Selectors

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *