Difference between ID and CLASS selector in CSS

To describe differences between CSS selectors, first, we must provide basic information about them.

The most used selectors in CSS are “ID” selector and the “class” selector.

Cascading Style Sheets or CSS selectors we use to target HTML elements on our web pages that we want to style.

Usually, when we styling our web pages, we can select specific elements like <h1>, <p>, and <ul>, but our basic set of tags doesn’t cover every possible type of page element or layout choice.

That’s why we need selectors…

When applying CSS styles to an element in the HTML document, we can use different CSS selectors to target our elements.

ID SELECTOR

With “ID” selector we can select an element by pointing out the unique ID name set with the id attribute.

The important thing if we use that selector is that can be used only once in HTML document. If we use that selector on more than one element, our code will not pass validation.

The ID selector consists of a hash (#), followed by the unique ID name of a referring HTML element.

ID selector cannot start with a number and must be at least one character long. They are also case-sensitive, and must exactly match across HTML, CSS, and JavaScript.

The ID selector in HTML document:

<div id=”element”>

<p>Content goes here...</p>

</div>

The ID selector in CSS document:

#element { /* this is the ID selector */

background: blue;

}

CLASS SELECTOR

When we want to style more than one object on a web page, we should be using a class selector.

It is important to say, that multiple elements in an HTML document can have the same class value. Also, a single element can have multiple class names separated by white space.

A Class selector can have any name that starts with a letter, hyphen (-), or underscore (_). We can even use numbers in class names. But a number can’t be the first character or the second character after a hyphen.

A class selector in HTML document:

<div class=”bank”>

<p>Content goes here...</p>

</div>

In CSS a class selector starts with a dot (.), like this:

.bank { /* this is the Class selector */

text-color: red;

}

DIFFERENCES BETWEEN ID AND CLASS SELECTORS

A Web page can only have one unique ID (#) applied to one specific element.
Look at the example when to use ID:

HTML

<div id="image1"></div>

<div id="image2"></div>

<div id="image3"></div>

CSS

#image1 {width: 250px; height: 250px; float: left;}

#image2 {width: 250px; height: 250px; float: left;}

#image3 {width: 250px; height: 250px; float: left;}

Yet, a class we can use multiple elements:

HTML

<div class="slider"></div>

<div class="slider"></div>

<div class="slider"></div>

CSS

.slider {width: 250px; height: 250px; float: right;}

There are no browser defaults by adding a class name or ID to an element. Both of them don’t have any default styling information to them all by themselves. They need CSS to select them and apply to style.

ID selector have one special ability in the browser, that class selector doesn’t have. ID selector marked with “hash value (#)” in URL (http://domainname.com#categories), make a browser attempt to locate the element with an ID of “categories” in a web page and scroll the page to show that element.

Instead of a conclusion, we can say, that is a very good idea having both an ID and a Class selector on a single element.

Let’s see an example:

HTML

<ul id=”list” class=”number”></ul>

With an element, that have ID and class as a selector, we can style all elements with the same class and style specific element with a specific ID selector.