HTML elements can be defined by type, class, attribute, pseudo-state, or ID name. How you group them will affect how you customize them using CSS selectors.

Download Now: Free Intro Guide to HTML & CSS

For example, if you want to make broad changes on your site, then you can use a type selector. Say you’d like to style every span element on your site. Then you’d use the type selector span { style properties }.

To make more detailed changes, you need a more specific selector. The most specific is an ID selector. Let’s take a closer look at this selector type below.

Here’s a look at the syntax of an ID selector in CSS:

#idname { style properties }

There are a few rules you must follow to use the CSS ID selector correctly. Before we take a look at those rules below, let me make an important note about the examples below.

I’ll be using the W3Schools Online Code Editor to create the following demos. Feel free to click any of the source links to see the full snippet of code behind the examples and experiment with them or create your own.

I’ll also be using BootstrapCDN so you’ll see a link to the CSS stylesheet and some other code in the <head> section if you click to view the code. However, the HTML and CSS of the examples will work on HTML5 sites as well. So if you’re building your site from scratch instead of using the Bootstrap CSS framework, you can simply remove the link and scripts from the <head> section.

How to Use ID in CSS

The first rule to keep in mind when using the ID attribute is that it must contain at least one character and cannot begin with a number.

Let’s say I have multiple h2s on my site and each marks the start of a new chapter. Then I might give each h2 an ID name.

The following HTML is correct:

 

 

   <h2 id="C1">Chapter 1</h2>

<h2 id="C2">Chapter 2</h2>

<h2 id="C3">Chapter 3</h2>

<h2 id="C4">Chapter 4</h2>

This is incorrect:

 

 

   <h2 id="1">Chapter 1</h2>

<h2 id="2">Chapter 2</h2>

<h2 id="3">Chapter 3</h2>

<h2 id="4">Chapter 4</h2>

The second rule to keep in mind is that if an element is given an ID name, it must be unique within a page. That way, an ID selector selects only one unique element.

Returning to the example of multiple h2s, let’s say I want each of these h2s to have a different style to visually cue the reader when a new chapter begins. In that case, I’d give each h2 a unique ID name so that I could use ID selectors to apply a unique set of property values to each.

The following HTML is correct:

 

 

   <h2 id="C1">Chapter 1</h2>

<h2 id="C2">Chapter 2</h2>

<h2 id="C3">Chapter 3</h2>

<h2 id="C4">Chapter 4</h2>

This is incorrect:

 

 

   <h2 id="C4">Chapter 1</h2>

<h2 id="C4">Chapter 2</h2>

<h2 id="C4">Chapter 3</h2>

<h2 id="C4">Chapter 4</h2>

The following CSS would change the font size of each h2:

 

 

   #C1 {

  font-size: 18px;

}

#C2 {

  font-size: 20px;

}

#C3 {

  font-size: 22px;

}

#C4 {

  font-size: 24px;

}

Here’s the result:

h2s with unique ID names targeted by ID selectors so they have different font sizes

Source

The last rule to keep in mind when using ID selectors is that the property value of the ID selector must match the ID name exactly.

Using the HTML from the example above, the following CSS would be correct.

 

 

   #C1 {

  font-size: 18px;

}

#C2 {

  font-size: 20px;

}

#C3 {

  font-size: 22px;

}

#C4 {

  font-size: 24px;

}

This would be incorrect:

 

 

   #c1 {

  font-size: 18px;

}

#c2 {

  font-size: 20px;

}

#c3 {

  font-size: 22px;

}

#c4 {

  font-size: 24px;

}

If I were to use this CSS with the lowercase “c,” the CSS ID selectors and their respective CSS rules would not be applied. The default h2 style in Bootstrap would render instead, as shown below.

ID selector property value does not match ID names so style properties are not applied

Source

Now that we understand what an ID selector is and how to use one in CSS, let’s make sure we understand the distinction between class and ID in CSS.

Another key difference between a class selector and an ID selector is specificity. CSS selectors have different levels of specificity so that if an HTML element is targeted by multiple selectors, the browser will apply the CSS rule of the selector with the higher specificity.

When comparing class selectors vs. ID selectors, ID selectors have the higher specificity and are therefore more powerful. (In fact, ID selectors are so powerful that only the !important property can override them in CSS.) That means if an element is targeted by an ID selector and a class selector, the CSS style of the ID selector will be applied to the element over the style of the class selector. Let’s take a look at an example demonstrating this rule below.

Say I’m creating buttons for my Bootstrap site. While Bootstrap CSS offers predefined styles for buttons, I’m going to create custom ones so I just start with the most basic template, shown below.

 

 

   <button type="button" class="btn">Button copy</button> 

 

Across my site, I want my button elements to be maroon. In that case, I’d use a class selector to define all elements under the button class to have a maroon background color (the hex color code #80000) and a white font color (#FFFFFF).

Here’s the HTML:

 

 

   <button type="button" class="btn" id="homepage">Subscribe</button>

<button type="button" class="btn">Subscribe</button>

 

Here’s the CSS:

 

 

   .btn {

   background-color: #800000;

   color: #FFFFFF;

}

Here’s the result:

Buttons targeted by class selector have same style properties applied

Source

But let’s say I want the subscribe button on my homepage to be even more eye-catching. Then I could use an ID selector to define the one button with the ID “homepage” to have a fuschia background color and a black font color (#000000). All buttons without the ID “homepage” will still follow the CSS rule of the class selector.

Here’s the HTML:

 

 

   <button type="button" class="btn" id="homepage">Subscribe</button>

<button type="button" class="btn">Subscribe</button>

 

Here’s the CSS:

 

 

   #homepage {

   background-color: #FF00FF;

   color: #000000;

}

.btn {

   background-color: #800000;

   color: #FFFFFF;

}

Here’s the result:

Button with ID name targeted by ID selector has different style than button with a class name, NOT an ID name

Source

Make Detailed Changes with the CSS ID Selector

CSS selectors enable you to control the appearance of HTML elements on your site. With the ID selector, you can maintain granular control over your customization process and code by targeting a single element on the page. To use this selector, you only need basic knowledge of HTML and CSS.

New Call-to-action

 css introduction

Originally published May 25, 2020 7:00:00 AM, updated May 25 2020

Topics:

Bootstrap & CSS