CSS Class vs ID

When I first learned CSS, the biggest challenge for me was learning the difference between “ID” and “CLASS” selectors. I struggled with the concept until I learned that “ID” selectors are unique and can only be used once in a page layout. On the other hand, “CLASS” selectors can occur multiple times in a single page layout. A good example of using the “CLASS” selector is using it for posts or articles which can occur many times in a single page. See some examples below.

ID Selectors

ID selectors are unique. They occur only once in a page layout. A good use for an ID selector are headers, footers, menus, sidebars, etc. Remember, it’s must be unique and can NOT be repeated in a page.

<div id="header">
header info here
</div>

Apply CSS to ID selectors by using the # pound sign. I associate “ID” selectors to an ID Card or a Drivers License which contains a unique number. Therefore IDs have unique numbers and uses the # pound sign.

#header {
padding: 10px;
margin: 2px;
}
#footer {
color: #555;
font-size: 12px;
}

CLASS selectors

CLASS selectors on the other hand, occur multiple times in a page such as divs for posts, articles, etc.

<div class="content">
content here....
</div>
<div class="content">
content here....
</div>

Apply CSS to CLASS selectors by using the . period sign. I associate CLASS selectors to a “class period” like in a school enviroment — a class period. The CSS code under .post in this case will apply to every instance of the CLASS selector.

.post {
padding: 10px;
margin: 2px;
}

I hope this short article clears up some of the confusion between ID and CLASSES for first time CSS coders. I hope it gives you a much clearer picture as to which selectors to use when designing your next page layout.

19 thoughts on “CSS Class vs ID

  1. Good intro. If you feel like following up, you may want to mention things like tag selectors, child selectors and pseudo-classes as well, as they’re definitely as useful (sometimes even more useful) than id or class based selectors.

    I know that’s not exactly the scope of this post, but just a suggestion :) Again, good intro though.

  2. As a frustrated developer, I decided to look for discussions on when to use which in order to see if anyone advocated what I advocate: use classes only unless you absolutely have to and only if you understand the functional repercussions of using id’s. The reason is that id’s are used by developers in order to implement a website’s functionality. For example, in javascript a developer will often use getElementById in order to affect the way something looks or behaves on the fly. Developers often need to give id’s that conform to a certain structure or convention in order to make their programs work.

    Even worse, in ASP.NET, the ID’s of elements are created by the server if the component has any server-side behavior. Little is as frustrating as being handed a design in HTML and CSS and asked to implement some functionality in a particular language, only to find that the designs need to be completely redone because the designer did too much work with id’s.

    To conclude, the best standard practice is to use id for function and class for cosmetics.

    1. Thanks for the clear recommendations and relevant reasoning on when to use classes and when to use IDs.

  3. Ok, I understand that class selectors can be used several times on a page compared to id selectors can be only be used once per page.

    So why not use classes exclusively?

    1. That works as well. As Andrew mentioned above, if you use Javascript that requires passing an ID, then you would need to use ID instead of class.

  4. Thanks – this was something that was really just a source of little confusion – this small article really helped!

      1. Hey Yul …

        Good article though man. I had never read it on your blog. Normally you cover linux stuff but this is good CSS beginners article.

        I did like the fourth or fifth comment on here that ID is for function and classes are for cosmetics. I think that is especially true for UI design for web apps.

        1. Yea, that was a great tip. I had to re-read it again. I dabbled with Javascript and sometimes it uses #id to change certain elements. I hear you, the code can really get messy.

Comments are closed.