id vs class attributes: The definitive guide
When I first gave up the security of Dreamweaver to hand-code websites, I was completely lost. I had a lot of questions and the answers weren’t always easy to find. One issue that had me stumped for the longest time was what is the difference between id and class attributes? I had no idea which to use when or where. I wasn’t sure it even mattered.
I figured it out eventually, but it took awhile. To save you from a similar struggle, I’ve put together everything I know, and everything you need to know, about id and class attributes.
The workhorses behind CSS
If you could only rely on the names of tags to style a website, your options would be pretty limited. Classes and id’s add extra “hooks”, or ways to target specific tags and apply styles to them. To make them as versatile as possible, class and id attributes have special characteristics.
They have no default styles in browsers
While web browsers have default styles for tags like headings and paragraphs, there are none for class and id attributes. Because they’re a blank slate, you cannot take a class or id name you used in one layout, add it to the markup of another layout, and expect the styles to work. (Been there, done that.) The styles for very id and class name have to be defined for every website independently.
Names are case-sensitive
An id or class name can have any value, with a couple of exceptions. It:
- Should always start with a letter or underscore (although Internet Explorer 6 has trouble with underscores), and
- Should not contain any special characters or spaces
Letters (both upper and lowercase), numbers, underscores, and hyphens are all okay to use. Keep in mind that names are case-sensitive, so class="MyClass" is different than class="myclass".
Styles are applied the same way to both
Any rules you use to style an id can be used on a class and vice-versa. The result is the same for both. Of course, all of that flexibility can lead to some confusion.
Which one to use
The toughest concept to grasp with id’s and classes is which one to use. The rules to remember are:
- id attributes are used to identify
- class attributes are used to classify
Here’s a quick analogy to make the difference easier to understand.
This is Gil:
Gil is a self-proclaimed geek. As a testament to his geekiness, Gil is a Level 30 Sorcerer in Dungeons & Dragons and, in his entire life, he’s never kissed a girl.
We can sum up everything we know about Gil like this:
On the left is Gil’s identity, or what would be his id attribute. It’s how we could pick him out of a crowd of geeks. On the right is his classification, or what would be his class attribute. These are the groups that he belongs to. Notice that not all Level 30 Sorcerers have never kissed a girl, and not everyone in the “never kissed a girl” group is a Level 30 Sorcerer. Unfortunately for Gil, he’s in the sweet spot and belongs to both groups.
If Gil were a div tag, he’d look like this:
<div id="gil" class="sorcerer no-kiss">Gil's gooey center</div>
The id attribute must be unique (i.e. only appear once in the markup), otherwise there’d be no way to tell which geek is Gil. This makes id attributes the ideal way to label sections of a layout, like the header or navigation. The class attribute, on the other hand, can include as many classes as you want, depending on how you wish to group elements for styling.
If you’re ever confused about which attribute to use, follow these guidelines:
Use an id attribute if:
- The element is structural or denotes a section within the layout (i.e. header, navigation, footer).
- The element will appear only once per page of markup.
- The styles to be applied are specific, such as absolute or relative positioning.
Use a class attribute if:
- The element to be styled will appear more than once on the page.
- The styles to be applied are more generic, such as colors or font properties.
The differences between id and class attributes
Now that you understand the conceptual difference between class and id attributes, these are the functional differences.
classes use a full stop (.), id’s use a hash character (#)
It’s a basic point, but this wouldn’t be the “definitive guide to id vs class attributes” without it. In a style sheet, classes are targeted by placing a full stop, or period, in front of the class name. To target a specific tag/class combination, the tag type is added before the full stop.
.classname {/* styles go here */}
p.classname {/* styles go here */}
id’s use a hash character, or the pound sign, in front of the id name. The tag type is never used.
#idname {/* styles go here */}
You can target a combination of id and class attributes like this:
#idname.classname {/* styles go here */}
id’s must be unique, but a tag can have multiple classes
This was just covered in the analogy with Gil, but it’s worth repeating. The ability of each tag to have more than one class makes class attributes a more versatile hook for styling. (See how to add a class attribute to the body tag for more info.) Remember to separate multiple class names in the class attribute with a space, like this:
<div class="one two three"></div>
id’s have a higher specificity than classes
If there are conflicting styles for an element, those applied to the id attribute will take precedence over styles applied to a class. Here’s some sample markup for a paragraph with an id and class:
<p id="intro" class="section2">This is the introduction.</p>
And here are two style rules. One targets the paragraph’s id attribute, the other it’s class.
#intro {color: red;}
p.section2 {color: green;}
Ordinarily when there are conflicting styles, the last rule has priority over earlier rules. But in this case, because the first style is applied to the id attribute, the paragraph would stay red.
id’s can be used for on-page links
You can use id attributes in a layout to create on-page links, like bookmarks and “Back to Top” links. Simply take the URL for the page and add the hash character and value of the id attribute to the end. So, if you had a div tag with an id attribute of “story”, a bookmark link to that section would look something like this:
<a href="http://www.yourdomain.com/page-name#story">Story Section</a>
When a visitor clicks the link, their browser will search for the id and scroll the web page so the start of that element is at the top of the window.
id attributes make life with javascript easier
If you dabble in javascript, the id attribute can be your best friend. With the getElementById() function, you can target individual tags with ease.
Once you understand the differences between id and class attributes, you’re a giant leap closer to creating well-coded tableless web designs. Try to be conservative in how you use classes and id’s. Let the “cascade” in your Cascading Style Sheets do the work. It only takes a few well-placed attributes to style any layout.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
