Difference between the Class & ID

CSS selectors define the elements to which a set of  CSS rules apply.

CSS selectors are the part of a CSS ruleset that actually selects the content you want to style. Let’s look at all the different kinds of selectors available: universal selector, element selector, class selector, id selector, group selectors, pseudo-selectors etc..

Universal selector represents with (*)


Element selector (h1)

h1{background-color :gold; color :blue}

class selector represent with(.) followed by class name

EX:<div class=”demo”></di>


Id selector represent with (#) followed by id name

EX:<div id=”demo”></di>


Group selector we can apply more than 1 element, class, id..

EX: <h1>welcome to sslabs</h1>

<h2>hello world</h2>

<div class=”demo”></div>

H1,h2,.demo{background: blue; color :red;}

Pseudo selector represent with (:)

<a href=” # ”>google.com</a>

<img src=” ” width:200px height=”200px” alt=” ” />
a:hover, a:avtibe,a:visible, img :hover etc.….

ID selector CLASS selector
Id’s are unique Class are not unique
Id represents with hash (“ # ”) Class represent with a full stop(“. “)
Each element can have only one id

Ex:<div id=”header”></div>

We can use same class to multiple element

Ex:<div class=”demo”</div>

<div class=”demo”</div>

Every page have only one element with that id only We can use multiple classes to a single element
ID can be used to identify one element a class can be used to identify more than one


Leave a Reply