Class and Identity, we all strive for it, some of us have it, others blend into the crowd.

Today I want to discuss IDs and classes in CSS. I want it to be clear and I want everyone to walk away with a firm understanding of the two types of specific identifiers used in CSS development. In order to do that I want to try something different. Ready?

Definitions

Classes and IDs are reusable ways to specify elements within a HTML page. The difference is IDs may only be used one time per HTML page, whereas classes may be used multiple times.

This seems simple on the surface, but it’s not as straight forward as it sounds.

Let’s look at an example.

let’s say we have four divs in our HTML, we want them to all have the same color background and height. We would write that CSS like this.

div{
 background-color: #FFFFFF;
  height: 50px;
}
CSS

All four of our divs are now white and 50 pixels tall, which is what we wanted, but what if we wanted to add a div later, and it has to be black and 60 pixels tall? We will need a way to differentiate the new div from the others, this is where classes could be used. We could add a new rule, that would look something like this.

div.black-box{
  background-color: #000000;
  height: 60px;
}
CSS

Now we have four, white 50 pixel tall divs and one, black 60 pixel tall div. This works, but it is sort of backwards.

Example ala Metaphor

OK, so we have five divs, four are the same, one is different. To specify the difference we’ve used a class, but that is not completely right, as the divs are already “self-classed”. They are all already divs, a class is sometimes redundant if there is already a unique element type being used.

A class is a way to specify an element generically, IDs are the much more specific, not unlike a proper noun.

This is a box, it’s name is Robert Paulson. Too subtle? Let me try something nerdier.

stormtrooper bay  
Arrival of Vadar, Star Wars — 1977

Let’s pretend for a moment that this docking bay is a HTML page. The stormtroopers inside are each divs with—for the sake of argument and example—a class of “stormtrooper”. There is one stormtrooper named Peter, you can see him there, but I’m getting ahead of the metaphor.

How might this code look, I’ve condensed the code to only show two stormtroopers, for brevity.

<div id="docking-bay">
  <div class="stormtrooper">
    <p>stormtrooper exists</p>
  </div>
  <div id="peter" class="stormtrooper">
   <p>stormtrooper exists</p>
  </div>
</div>
HTML

Our CSS will look like this:

.stormtrooper{
 background-color: #FFFFFF;
  height: 50px;
}

  #peter.stormtrooper{
    background-color: #000000;
    height: 60px;
 }
CSS

Making sense? Do you understand why only one ID can exist per HTML page? There is only one Peter the stormtrooper. I mean sure, maybe there are other Peters in there, but they are not this specific Peter.

I would never in a million years suggest you use a class on every div in a page, that was only for illa-metaphoric purposes. Best case would be to remove the class stormtrooper and just use the docking-bay parent to target those specific divs, this is how that would look.

#docking-bay div{
  background-color: #FFFFFF;
  height: 50px;
}

  #docking-bay #peter{
    background-color: #000000;
    height: 60px;
 }
CSS

See, much cleaner and less HTML needed.

peter the stormtrooper

Wanna take a closer look at Peter? Yeah, me too. Here he is. Peter is a stormtrooper, and he has a black gun. Now how could we say that in CSS?

#peter.stormtrooper .gun{ background-color: #000000; }
CSS

As an aside, these examples are actually bringing up something important, but small that I would like to quickly touch on.

When I have #peter.stormtrooper and the class and ID are touching or when I have #docking-bay #peter and the two IDs are not touching?

The difference is this. #peter and .stormtrooper are the same div, so when I use both the ID and class to specify I have to chain them, however, when I place a space between elements like #docking-bay #peter, I’m telling the CSS that #peter is a child of #docking-bay.

By the way, “child” merely means that the div #peter is inside of the div #docking-bay.

Recap

  1. Think of IDs as proper nouns (e.g. Peter) and classes as general nouns (e.g. Stormtrooper).
  2. You may use each ID only once per HTML page.
  3. You may use each class multiple times per HTML page.
  4. Use classes sparingly. e.g. Don’t use a class if you already have an ID parent that can be used.
  5. Multiple classes can be used on the same box. e.g. <div class=“desert stormtrooper”></div>
  6. Classes should be general lowest common denominator type rules, IDs should be more specific.
  7. Peter is a stormtrooper, his gun is black.

That’s it for today, did I confuse things, or make it easier to understand, .(JavaScript must be enabled to view this email address).