In Html DOM both id and class are the element selector and are used to identify an element based on the name assign to these parameters.
The following are the important differences between Id and Class.
| Sr. No. | Key | Id | Class |
|---|---|---|---|
| 1 | Syntax | In Html for an element ID name starts with the “#” symbol followed by a unique name assigned to it. | On the other hand class assigned to an element has its name starts with “.” followed by class name. |
| 2 | Selector | Only one ID selector can be attached to an element. | Multiple class selectors can be attached to an element. |
| 3 | Uniqueness | Id is unique in a page and can only apply to at most one element | The class can be applied to multiple elements so it could be multiple times on a single page. |
Example of Id vs Class
Id.html
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html>Class.html
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by class</h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>