HTML elements can be defined by type, class, attribute, pseudo-state, or ID name. How you define them will affect how you customize them using CSS selectors.
For example, if you want to make broad changes on your site, then you can use a type selector. Say you鈥檇 like to style every span element on your site with CSS. Then you鈥檇 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鈥檚 take a closer look at this selector type below.
Here鈥檚 a look at the syntax of an ID selector in CSS:
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鈥檒l also be using to load Bootstrap's default stylesheet so the examples will be styled accordingly. However, the HTML and CSS of the examples will work on HTML5 sites as well. So if you鈥檙e building your site from scratch instead of using the Bootstrap CSS framework, you can still use the HTML and CSS as templates.
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鈥檚 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:
This is incorrect:
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鈥檚 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鈥檇 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:
This is incorrect:
The following CSS would change the font size of each h2:
Here鈥檚 the result:
See the Pen by Christina Perricone () on .
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.
This would be incorrect:
If I were to use this CSS with the lowercase 鈥渃,鈥� 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.
See the Pen by Christina Perricone () on .
We've covered the rules of using the ID selector in CSS. Now let's apply them by using an ID selector to style images.
You can use the ID selector on headings or images, buttons, and other HTML elements.
Let's say you want to style a specific image on your page. Maybe you want it to have a different shape and level of opacity than the other images on that page. In that case, you could use an ID selector.
To start, you'd add an ID attribute to the image. This ID attribute can appear anywhere inside the image element: before the img src attribute, after the src attribute but before the alt attribute, after both the img src and alt attributes.
In the example below, I'll place the ID attribute "round" before the src and alt attributes in the second image element. Then, I'll use an ID selector to style this image to be round and 70% opaque.
Here's the HTML:
Here's the CSS:
Here's the result:
See the Pen by Christina Perricone () on .
Now that we understand what an ID selector is and how to use one in CSS, let鈥檚 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鈥檚 take a look at an example demonstrating this rule below.
Say I鈥檓 creating buttons for my Bootstrap site. While Bootstrap CSS offers predefined styles for buttons, I鈥檓 going to create custom ones so I just start with the most basic template, shown below.
Here's the CSS:
Across my site, I want my button elements to be Calypso blue. In that case, I鈥檇 use a class selector to define all elements under the button class to have a blue background color (the hex color code #00A4BD) and a white font color (#FFFFFF).
Here鈥檚 the HTML:
Here鈥檚 the CSS:
Here鈥檚 the result:
See the Pen by Christina Perricone () on .
But let鈥檚 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 鈥渉omepage鈥� and style it to have a fuschia background color and a black font color (#000000). All buttons without the ID 鈥渉omepage鈥� will still follow the CSS rule of the class selector (blue background color and white font color).
Here鈥檚 the HTML:
Here鈥檚 the CSS:
Here鈥檚 the result:
See the Pen by Christina Perricone () on .
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.
Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.