シェアする
CSS Syntax: Differences Between Class and ID Selectors - Images: Japanese
Hey everyone!
Next up, let's look at the difference between the id attribute and the class attribute.
If you've already studied HTML, you may know this: there's a grammar rule that says no two elements in the same HTML file can share the same id value. On the other hand, any number of elements in the same HTML file can share the same class value.
To put it plainly: multiple elements can share the same class name in one HTML file, but multiple elements cannot share the same id name.
<div id="test">This is invalid — two elements with the same id "test"</div> <div id="test">This is invalid — two elements with the same id "test"</div> <div class="test">This is fine — "test" here is a class name, so duplicates are OK</div> <div class="test">This is fine — "test" here is a class name, so duplicates are OK</div>
By the way, id names and class names are completely separate namespaces, so using the same name for both is perfectly fine.
/* This is perfectly valid */
p#test {
color: red;
}
p.test {
color: blue;
}
So the natural question is: when should you use an id name, and when should you use a class name?
If you thought "since class names can be reused freely, it's more convenient to just use class names for everything" — you're absolutely right.
For a website built purely with HTML and CSS, there's almost no benefit to using id names. It's perfectly fine to use class attributes for everything. There's no need to force yourself to use id names just because "this element only appears once".
"So when do you actually use id attributes?" Great question. The main use case for id attributes is JavaScript.
There's a method called document.getElementById() that has been around since the very beginning of JavaScript. It finds and retrieves an element by its id name. JavaScript offers many ways to target elements, but this method is one of the fastest.
So a common approach is: add id attributes only to elements that JavaScript needs to interact with, and use class names for everything else. And don't worry — in terms of rendering performance, there's no dramatic speed difference between id and class selectors.
You might be wondering: "If multiple elements share the same id name, how does CSS apply styles to them?"
The behavior varies slightly by browser, but in practice, CSS styles will often be applied to all elements with that id name, just like a class name.
That said, it's still grammatically incorrect, so if you need to target multiple elements, use a class name instead of an id name.
When JavaScript retrieves an element by id, it stops as soon as it finds the first match — any subsequent elements with the same id are simply ignored.
That covers how to use id selectors and class selectors, the syntax for each, and the difference between them. It might feel like a lot to take in, but these are fundamental concepts worth getting solid on.
We've covered a lot of CSS basics in the articles so far, and it can start to feel like a blur — so in the next article, let's do a quick recap and review everything together.
See you there!
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
