Class v/s Id

The selectors in CSS are part of the CSS ruleset and used to select the content we want to style. Id and class both are the CSS element selectors and are used to identify an element based on its assigned name. CSS id and class selectors are the most used selectors in CSS.

During the use of selectors, sometimes there is confusion occurs between id and class. Both of them do not have any default styling information; they require CSS to select them and apply it to style. Although both are used for selecting the element, they are different from each other in many ways.

The difference between the id and class is tabulated as follows.

Class	Id
We can apply a class to various elements so that it could be numerous times on a single page.	The Id is unique in a page, and we can only apply it to one specific element.
The class is assigned to an element and its name starts with "." followed by the name of the class.	The name of the Id starts with the "#" symbol followed by a unique id name.
We can attach multiple class selectors to an element.	We can attach only one ID selector to an element.
Syntax: .class{ // declarations of CSS }	Syntax: #id{ // declarations of CSS }

Let's discuss the id and class separately.

ID Selector

The id selector is used to select the id attribute of an HTML element for selecting a particular element. An id is always unique within the page, so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

The example of the id selector is given as follows.

Example

In this example, we are selecting the element with the id "para".

<!DOCTYPE html>
<html>
<head>
<style>
#para {
text-align: center;
color: blue;
font-size: 25px;
background-color: pink;
}
</style>
</head>
<body>
<h1> Welcome to the Javatpoint.com </h1>
<p id = "para">This paragraph will be affected.</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

Test it Now

Output

Class Selector

The class selector is used to select the HTML elements with a specific class attribute. It is written with a period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

The example of the class selector is given as follows.

Example

In this example, we are selecting the elements with the class "example".

<!DOCTYPE html>
<html>
<head>
<style>
.example {
text-align: center;
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="example">This heading is blue and center-aligned.</h1>
<p class="example">This paragraph is blue and center-aligned.</p>
</body>
</html>

Test it Now

Output

CSS Class Selector for a specific element

We can also style the specific element using the class selector, no matter if it is applied to different elements.

If we need to specify that only one specific HTML element should be affected, we must use the element name with the class selector.

It will be clear from the following example.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.example {
text-align: center;
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="example">This heading is not effected.</h1>
<p class="example">This paragraph is blue and center-aligned.</p>
</body>
</html>

Test it Now

Output

There is another example in which we apply multiple classes on the same element. Let's see an illustration of the same.

Example

In this example, we are using two classes (example and para) on the paragraph element and styling the paragraph using both classes.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.example {  
    text-align: center;  
    color: red;  
	font-size: 1cm;
}  
.para{
font-family: Lucida Calligraphy;
text-shadow: 5px 8px 9px yellow;
}
</style>  
</head>  
<body>  
<h1 class="example">This heading is red and center-aligned.</h1>  
<p class="example para">This paragraph is red and center-aligned with a font-family "Lucida Calligraphy" and text-shadow.</p>   
</body>  
</html> 

Test it Now

Output