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;

}

 

Difference between ID and Class Selectors

 

 

  1. 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;}

 

  1. 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.

 

  1. 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.

14 Comments
  • online dictionary
    Posted at 12:31h, 05 March Reply

    Keep this going please, great job!

    • Milan Matejic
      Posted at 19:05h, 08 March Reply

      I will, thanks for your support. Keep reading…

  • Montréal Brew Tours
    Posted at 01:54h, 10 April Reply

    Thank you for writing this awesome article. I’m a long time reader but I’ve never been compelled to
    leave a comment. I subscribed to your blog and shared this on my Facebook.
    Thanks again for a great post! https://www.citybrewtours.com/montreal/

  • Clindoeil Montreal
    Posted at 22:33h, 25 April Reply

    Greetings! Very useful advice within this post! It
    is the little changes that make the greatest changes.
    Many thanks for sharing!| I seriously love your website..
    Excellent colors & theme. Did you build this site yourself?

    Please reply back as I?m trying to create my own personal blog and would like to find out where you got this from or
    exactly what the theme is called.
    Cheers! https://clindoeilmontreal.ca/contacts/

    • Milan Matejic
      Posted at 09:04h, 02 May Reply

      Thank you Clindoeil for such kind words. As for the website, I bought the WordPress theme “Bridge” and adjusted it by myself. That theme offers many opportunities, however, it needs editing in order to become exactly what you want.

  • performArts
    Posted at 01:15h, 03 May Reply

    Thank you for writing this awesome article. I’m a long time reader but I’ve never been compelled
    to leave a comment. I subscribed to your blog and shared this on my Twitter.
    Thanks again for a great post! https://www.perform-art.com

    • Milan Matejic
      Posted at 07:18h, 03 May Reply

      Thank you, it’s encouraging to hear such kind words — also, thanks for sharing it.

  • Highland avenue restaurant
    Posted at 11:26h, 16 June Reply

    Excellent post. I was checking constantly this blog and I am impressed!
    Very helpful information specially the last part 🙂 I care for such information much.
    I was seeking this particular information for a long time.

    Thank you and best of luck.

  • roku.com/link
    Posted at 06:10h, 17 September Reply

    You are a very clever individual!

  • aol support
    Posted at 08:57h, 17 September Reply

    There’s certainly a lot to find out about this subject.
    I like all of the points you’ve made..

Post A Comment