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.
Let's discuss the id and class separately.
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.
In this example, we are selecting the element with the id "para".Test it Now
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.
In this example, we are selecting the elements with the class "example".Test it Now
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.
ExampleTest it Now
There is another example in which we apply multiple classes on the same element. Let's see an illustration of the same.
In this example, we are using two classes (example and para) on the paragraph element and styling the paragraph using both classes.Test it Now