Class and ID Selectors
Once you grasp Class and ID selectors, you’ve got the key to sleek and lean web design. The moment you start designing how a website should look, you need a technique to tell the browser precisely which HTML elements should be colored a certain way, what typeface to use with it, or where they are located on the screen. This is where the difference between a class and an ID becomes important for every developer to understand.
1. The Class Selector (.)
A Class is when you have multiple elements on a page that you want to apply the same style to. As many as you like of items can have the same class name.
The Symbol: A period (.)
The Vibe: “Will the real blue-shirted person please stand up?”
Example
Suppose that you have different “tips” in your website, and you want them to look identical.
The HTML:
HTML <p class=”tip”>Remember to save your work! </p> <p class=”tip”>Remember to get water in. </p> This is a tip styled box. </div>
The CSS:
CSS
.tip {
background-color: yellow;
font-weight: bold;
padding: 10px;
}
2. The ID Selector (#)
An ID is a way to identify a unique element on the whole page. You should never have the same ID name twice in one page.
The Symbol: A hashtag (#)
The Vibe: “Hey Dave, you yeah points come here.
Example
You could assign an ID to a particular feature, such as a ‘Submit’ button or special header.
The HTML:
HTML
<button id=”main-submit-button”>Click Me</button>
The CSS:
CSS
#main-submit-button {
background-color: green;
color: white;
border-radius: 5px;
}
Class and ID are both styling selectors, but the IDs are more powerful (have a higher specificity) preferredStyleObjectOfTypeID. In other words, if both the class and ID are vying to change the color of a piece of text, it will always be the winning side i.e. the latter i.e. ID in this case whose color changes win!
Key Differences at a Glance
| Feature | Class (.) | ID (#) |
| Frequency | Reusable on the same page. | Should only be used once per page |
| Multiplicity | Classes An HTML element can have more than one class (e.g., class=”btn primary”). | Each element can have only one ID. |
| Priority | Lower “power” (Specificity). | Higher “power”—it beats Class styles. |
| Best For | Buttons, cards and text colors, for example. | Special layout pieces (header, footer, nav bar). |
Which one should you use?
Classes are all the rage in contemporary web development.
Developers lean on classes for most its things because it is versatile. By using an ID, you’re “locking” that style to one element. And if you later want another “Submit” button to have the same appearance, you would have to duplicate your CSS. With a class, you simply add the name to your HTML.
Pro Tip: If you are stuck, use a Class. You should only use an ID if you have a compelling reason to do so (such as linking to a specific section of a page or for JavaScript behavior).
Check out our resources!
- Bootstrap Templates: Dive into our collection of Responsive Bootstrap Projects.
- Free E-Books: Master your skills by downloading our Full Library of Free Programming E-Books.
