Menu
Why use ID when you can do the same task with class?
I mean, ok I know that IDs are just for one time use and classes are for many, but what forbids me from using the class selector for just once ? So, according to this, what is the purpose of existence of ID's in CSS ?
Furthermore, what do we need IDs and even classes for, when we can make a new element in the stylesheet with exactly the same attributes ?
The following code is an example of what I'm trying to ask:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ID's, classes and new elements</title>
<style>
#sidebar1 {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
.sidebar2 {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
new_element {
display: block;
background-color: yellow;
width: 200px;
height: 500px;
margin-right: 50px;
float: left;
}
</style>
</head>
<body>
<div id="sidebar1">What is the difference?</div><!--Use of ID selector-->
<div class="sidebar2">What is the difference?</div><!--Use of class selector just once !-->
<new_element>What is the difference?</new_element><!--Use of a new made element with exactly the same attributes-->
</body>
</html>
214
ID are unique for the page, so it's better for identification. Class aren't unique and are supposed to be to group similar style things together. Said otherwise, if you need to apply something to THAT SPECIFIC div, you should call it by the id, because it will take priority over other CSS styles that may affect it.
IDs have a higher level of specificity than classes in CSS. This helps to create strong reference points for children selectors. They're faster and easier to identify in the DOM versus a class.
The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
After seeing the result of the above code, it is crystal clear that the ID selector is the fastest. The class and element selector is taking almost the same time.
There are several differences between ids and classes. Probably most importantly there is a semantic difference. An Id needs to be unique (actually you html is invalid if you use the same id twice in the document) and identifies special elements in your HTML Document, classes are there to group elements which have something in common.
1) Searching for id in the HTML Tree is faster than class because the css processor stops at the first matching element it finds. (Thus id css selectors are faster).
2) Ids and classes have different specificity. Since ids are unique in the document, they have higher specificity than classes. This is important in bigger projects where you have a lot of CSS rules where a lot of overwriting occurs.
3) The difference between classes and ids is even greater once you work with javascript.
Defining new elements leads you markup to be invalid, that's why the last option is not a good idea.
67
Both will have the same outcome, but while a class can be used once or multiple times, an ID can only be used once. If you have a unique element that will not be reused on the page, an ID should be used. If it is something that will be recurring, a class should be used.
Some of the differences don't involve just CSS. Later, if you delve into javascript, you may be selecting HTML elements. If you want to ensure you will be selecting the correct element, an ID would be more helpful than a class.
27
I believe there are a few reasons.
One is because of specificity, id rank higher than classes.
Another is based on the particular use of the object you are effecting. Is the class something that only effects the font-size, weight, family and does it need to be used multiple times or only once?
I think that semantics plays a part as well, i.e. if you only use a class once, it more be more semantic to use an id instead.
You also use an id for JavaScript to grab an element from the document.
Those are only a few, but I hope this helps
1
It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future. Also your html markup will be invalid.
I think here is nice explanation about difference between id and class.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
