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 .
When working with selectors, confusion may arise between id and class. Neither of them come with predefined styling; instead, CSS is necessary to target and style them. While both serve the purpose of selecting elements, they differ from each other in various aspects.
The variance between the id and class is outlined in the table below.
| 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 employed to target the id attribute of an HTML element in order to specifically choose one element. Each id is distinct within the page, making it ideal for selecting a singular, unique element.
It is composed using the hash symbol (#), then followed by the identifier of the element.
An illustration of the id selector is presented below.
Example
In this instance, we are choosing the element identified by 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 C# Tutorial </h1>
<p id = "para">This paragraph will be affected.</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output
Class Selector
The class selector is employed to target HTML elements having a particular class attribute. It is denoted by a period symbol (.) followed by the class name.
Note: A class name should not be started with a number.
An illustration of the class selector is presented below.
Example
In this instance, we are choosing the elements that have 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>
Output
CSS Class Selector for a specific element
We have the option to customize the particular element by utilizing the class selector, regardless of its application to various elements.
When indicating that only a particular HTML element should be impacted, it is essential to employ the element's name alongside 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>
Output
There is an additional instance where we assign multiple classes to a single element. Let's examine a visual representation of this scenario.
Example
In this instance, we are applying two classes (sample and para) to the paragraph element and formatting the paragraph by utilizing 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>
Output