<div> IDs vs. Classes

[fuzzybabybunny]

I'm just trying to talk this through to myself. Can someone critique?

So a div ID is for assigning properties to a specific object, but a class is for assigning properties to multiple objects.

If I have sections of a website, say, the header, the footer, and the contents, and I want to apply unique properties to each, I would assign each an ID, correct?

If I've got 15 images, and I want the same properties for each (same padding, border, etc) I should assign the same class to each of those images, correct?

But this is where I get confused and fail to understand why it matters.

Say that I've got a footer ID with XYZ characteristics. I apply this footer ID to the footer section. But I think, hey, I want the same XYZ characteristics for the header section as well. So I just apply the footer ID to the header section. I mean, is there anything stopping me from using ID twice in the same document?

On the flip side, say I've got a Class with XYZ specs. And I only have one image on my page to apply these specs to. So I just use Class once on one object on the entire page.

So it seems that ID and Class both do the exact same thing... right? And now I'm wondering... why have two things that are completely the same except for in name?

 

[Snapster]

Id's are to be unique, whilst you can have two in a document and they'll likely render ok but the document will not pass any sort of validation and you may get unexpected results using JavaScript that uses those id's.

Id's also have the ability to also force style override over classes eg:

#mytext { color: #000; }
.text { color: #fff; }
<p id="mytext" class="text">blah blah</p>

The text will be black not white.

There's nothing stopping you mixing classes and id's, so you can apply some general styles to headers/footers using a class, then apply specific properties using id's. Regarding your images, depending on the scenario you should give a class name for each to apply the style, however if you can cut down on this do so, a typical example would be a gallery where scenario 1 would be better than 2.

Scenario 1
.gallery img { border: 1px; padding: 3px; }
<div class="gallery">
<img src="y.png" alt="pic" />
<img src="y.png" alt="pic" />
<img src="y.png" alt="pic" />
</div>


Scenario 2
.thumb { border: 1px; padding: 3px; }
<div>
<img class="thumb" src="y.png" alt="pic" />
<img class="thumb" src="y.png" alt="pic" />
<img class="thumb" src="y.png" alt="pic" />
</div>

 

[fuzzybabybunny]

Ahhh... I see.

What happens when two classes or two ids fight? Which overrides which?

#mytext { color: #000; }
#text { color: #fff; }
<div id="mytext">
<div id="text">
blah blah
</div>
</div>


.mytext { color: #000; }
.text { color: #fff; }
<div class="mytext">
<div class="text">
blah blah
</div>
</div>

 

[Snapster]

Originally posted by: fuzzybabybunny
Ahhh... I see.

What happens when two classes or two ids fight? Which overrides which?

#mytext { color: #000; }
#text { color: #fff; }
<div id="mytext">
<div id="text">
blah blah
</div>
</div>


.mytext { color: #000; }
.text { color: #fff; }
<div class="mytext">
<div class="text">
blah blah
</div>
</div>

The inner style would win as it defines a new colour which overrides what was inherited down.

 

[fuzzybabybunny]

Cool. Oh man, I've got so many other questions ><

I feel bad making all these threads because I get stumped SOOOOOO much...

 

[Snapster]

You learn by practise and your peers and everyone has to start out somewhere. Besides, there are plenty of people here that can answer your questions so I don't see any harm in posting a question or two.

 

[fuzzybabybunny]

Originally posted by: Snapster
You learn by practise and your peers and everyone has to start out somewhere. Besides, there are plenty of people here that can answer your questions so I don't see any harm in posting a question or two.

I was thinking a question or ten.

 

[Titan]

I looks at it like this: classes are good for css, ids are good for javascript.

Though you may only think you will have one item of a particular style, you may find yourself reusing it later as style really isn't about content, it's about, um, well, style. Colors and shapes can all be reused so use classes wherever possible. I've seen people use more than one class for one div and I do have mixed feeling about that, but use at least one.

If say, you generate a list of checkable items with php from a database, and each item has an ID from the DB, use classes to format the style, and give each item and ID so that when say, they click a checkbox next to an item, you get the id of the one item and do what you need to it (say, highlight, display a message).

Also jQuery works on groups of objects (using the CSS selector engine no less) so it's common for it work on all items of one type and then manipulating by changing their css class, not id. It's really nice to fully remove both the style with css and code with jQuery so the html looks simple.

 

[Snapster]

Originally posted by: Titan
I looks at it like this: classes are good for css, ids are good for javascript.

Though you may only think you will have one item of a particular style, you may find yourself reusing it later as style really isn't about content, it's about, um, well, style. Colors and shapes can all be reused so use classes wherever possible. I've seen people use more than one class for one div and I do have mixed feeling about that, but use at least one.

If say, you generate a list of checkable items with php from a database, and each item has an ID from the DB, use classes to format the style, and give each item and ID so that when say, they click a checkbox next to an item, you get the id of the one item and do what you need to it (say, highlight, display a message).

Also jQuery works on groups of objects (using the CSS selector engine no less) so it's common for it work on all items of one type and then manipulating by changing their css class, not id. It's really nice to fully remove both the style with css and code with jQuery so the html looks simple.

Using jQuery I use both id's and classname to select elements within the page as sometimes I find it's necessary. In your example, checking a box might require making sure others are deselected / disabled and not necessarily in the same grouping. Basically jQuery has made my development so much easier!

 

[LightningRider]

For CSS, IDs take priority over classes. So if you have something like:

a#someLink { color: red; }
a.someLink { color: blue; }

And then you had a link with <a href="#" class="someLink" id="someLink">Text</a>

The link would be red because the ID takes priority over the class. Sometimes you have long strings of classes and IDs in your selectors... What's important to remember is that the CSS that will be applied last is the one that is the most specific. The most specific CSS selector will override selectors with less precision. IDs are more specific than classes and also specifying a tag name is also more specific than if you were not to specify anything and just wrote the class or ID.

You'll get used to it more once you have some practice with it.