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”.
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”.
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
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.
Output
