div class="abc" versus div id="abc"

[AffiliateDreamer]

Hi,

I understand what <div class="abc"></div>, but what does <div id="abc"></div> do?

[Setek]

It's all specificity. Here's a basic rundown:

Classes are used when there are multiple elements carrying that same property. IDs are used when there is only one element. Ergo: You can use classes multiple times on one page, whereas with IDs you cannot.

Selectors by themselves hold a specificity value of 1. Classes hold a specificity value of 10. IDs hold a specificity value of 100. And so we can calculate which CSS properties get overridden, and which do not. Ergo:

HTML:

<div>test</div>

CSS:

div { color: #f00; }
div.blue { color: #00f; }
div#white { color: #fff; }

So, we have our element. It is red. We apply a class to it:

HTML:

<div class="blue">test</div>

.. and it's no longer red, but blue. We apply an ID to it:

HTML:

<div id="white">test</div>

.. and it's no longer red, or blue, but white.

That's the bare necessities of what you need to know, but there are many different uses/applications of specificity, along with many annoyances.