I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycolor1 {color: red;}
.mycolor2 {color: red;}
</style>
</head>
<body>
<div id="mycolor1"> hello world </div>
<div class="mycolor2"> hello world </div>
</body>
</html>
They do not do the same thing.id
is used to target a specific element, classname
can be used to target multiple elements.
Example:
<div id="mycolor1" class="mycolor2"> hello world </div>
<div class="mycolor2"> hello world2 </div>
<div class="mycolor2"> hello world3 </div>
Now, you can refer all the div
s with classname mycolor2
at once using
.mycolor2{ color: red } //for example - in css
This would set all nodes with class mycolor2
to red
.
However, if you want to set specifically mycolor1
to blue
, you can target it specifically like this:
#mycolor1{ color: blue; }
ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...
Read the spec for the attributes and for CSS.
id
must be unique. class
does not have to beid
has higher (highest!) specificity in CSSid
id
can be used as an anchor target (using the fragment of the request) for any element. name
only works with anchors (<a>
)For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.
In terms of performance:
CSS selectors are matched from right to left.
Therefore, .myClass should be "faster" than #myID because it misses out testing.
The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.
Here is more info on why css is browsers match css selectors from right to left
To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.
Also, ID properties have priority over class properties.
ids and classes are especially useful if you plan on using javascript or any of its frameworks.
Classes should be used when you have multiple similar elements.
Ex: Many div's displaying song lyrics, you could assign them a class of lyrics
since they are all similar.
ID's must be unique! They are used to target specific elements
Ex: An input for a users email could have the ID txtEmail
-- No other element should have this ID.
ID is suitable for the elements which appears only once Like Logo sidebar container
And Class is suitable for the elements which has same UI but they can be appear more than once. Like
.feed in the #feeds Container
The object itself will not change. The main difference between these 2 keyword is the use:
In the CSS or Javascript files:
class is used when u want to set properties for a group of elements, but id can be set for only one element.
ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS .
class and #
ID prefixes, so that's pretty much it.
Source: Stackoverflow.com