Css Selectors ID and class

Class and ID are two core selectors in Css,they are both used as identifier in a webpage, however, there times when using one of the two is recommended than using the other. Genarally, the ideal behid using an ID is to uniquely differentiate that particular element on the webpage, although we can also use a class to uniquely differentiate an element as well.

let us use a lame man understanding to get the picture clear.

Css Selector – Class

A group of things with something in common. for example, the class of 2021 computer science graduates of the university of chicago (Cof2021CSC). all the graduaduands have Bachelor’s degree in computer science.

Css Selector – ID

A unique identity for a something. for example, the matriculation number of the best graduating student of computer science in the year 2021 from the university of chicago mat/c/1718/123321. this graduate have a barchelor’s degree in computer science and an award( best graduating student)

Hopefully the picture above clarify what a class is and what an ID is.

When To Use Class Selector In Css

it is adviseable to use a class for elements with similar attributes, for instance, you can add a btn class to all your buttons. by adding the btn class to all your buttons, you can add basic styling to the buttons as shown below

html

Css

Browser Output

we simply added styling to all our buttons without repeating the styling anywhere else. if in the future you want to use thesame styling, all you need to do is to add the class to the element and you are good to go.

When To Use ID Class Selector in Css

There is no rule that stops you from using a class in a place of an ID but a good practice is to use an ID when you want to target a specific element in the webpage. using our example above, if we want to target the hover button in order to add hover feature, all we need do is to add an ID to that button as shown below.

html
 <button class="btn">Click</button>
  <button class="btn" id="hover">Hover</button>
  <button class="btn">Top</button>
   <button class="btn">Menu</button>
css
#hover:hover {
  color: black;
  background-color: orangered;
}

Browser Output

You can clearly see that the hover styling is applied to the hover button.
the main reason why you need to use an ID is uniqueness. if you add a different styling to the hover button using the ID, it will overide the styling applied in the btn class. see the illustration below

html
<button class="btn">Click</button>
 <button class="btn" id="hover">Hover</button>
  <button class="btn">Top</button>
  <button class="btn">Menu</button>

css
#hover {
  color: green;
  background: transparent;
  border: 1px solid black;
}
.btn {
  padding: 0.8rem;
  width: 60px;
  color: orangered;
  background-color: black;
  font-weight: 700;
  border: 0 solid grey;
  border-radius: 10px;
  transition: background 0.7s linear;
}
#hover:hover {
  color: black;
  background-color: orangered;
}

browser output

Notice how the hover button color and background changes due to unique styling applied to the hover button using a unique identifier (ID).
hopefully you understand how the Css selectors ; ID and class works, how and when to use them in your project.
you can also learn when to use a class and when to use an ID in javascript from here