Define by ID or Class?

[Spookster]

Ok decided to start getting into defining layout via CSS. Haven't seriously touched CSS other than defining fonts, fontsize, etc. in a long time.

What is the difference between defining a block level div like this:

<div id="content">Blah</div>

and corresponding css:

div#content{
//css here
}


or

<div class="content">Blah</div>

div.content{
//css here
}

and in addition to that last one, what is the difference between defining the css like:

div.content{
//css here
}

and

.content{
//css here
}

[brothercake]

The difference between ID and class is only in useage - an ID is one specific element, where a class is general.

As for the last two - well it depend on what you want classes for - you might have a class that applies different visual styling to a DIV than it does to a SPAN, but you're using the same classname for semantic reasons - element.className would do that, where .className would apply to all elements.

I generally use element.className anyway because you get good encapsulation that way; I'm a bit superstitious about encapsulation ;)

[Spookster]

ok so then I could do something like this then?

.content{
font-family: Arial, Helvetica, sans-serif;
}

div.content{
font-size: 18px;
color: #000000;
}

span.content{
font-size: 12px;
color: #FFFFFF;
}

<div class="content">Blah</div>

<span class="content">Other Blah</span>



and now on my first question earlier. Is one way better than the other because the way I see it I can accomplish the same thing with either using ID= or Class=.

div#yaks{
font-size: 18px;
color: #000000;
}


<div id="yaks">Blah</div>

<div id="yaks">Other Blah</div>


or

div.yaks{
font-size: 18px;
color: #000000;
}


<div class="yaks">Blah</div>

<div class="yaks">Other Blah</div>

oh and on the encapsulation thing.....maybe you have a fear of commitments? :D

[brothercake]

The first one (div/span class=content) - yes that's exactly right. So you have two elements which are both "content", but they look different.

The second one - well in practise that would amount to the same thing. But you're forgetting ... it's illegal to have two elements with the same ID :p

As for commitment ... just don't get me started ;)

[jkd]

Bad Spook! ;)

The ID attribute must be unique in an HTML document, the DTD says so. :D

Having multiple ID's of the same value is invalid and screws up any DOM-related methods in a correct browser.

That's why you should use classes if you plan on styling more than one element.

[brothercake]

Ha! I knew you'd jump on that one :D

[Spookster]

Originally posted by jkd
Bad Spook! ;)



:( I don't mean to be bad. It's all my g/f's fault. I wonder if she will catch this. I'll see if she's paying attention.

[cg9com]

incase you go any deeper into nesting you can match it up in the CSS tree as well, the same as div.selector

div span a:hover {color:red}

<div><span><a href="blah">blah</a></span></div>

hope you dont mind me intruding on your mod only thread. :D:D:D

[jkd]

Originally posted by cg9com
incase you go any deeper into nesting you can match it up in the CSS tree as well, the same as div.selector

div span a:hover {color:red}

<div><span><a href="blah">blah</a></span></div>

hope you dont mind me intruding on your mod only thread. :D:D:D

Better to use div > span > a:hover if you're going to start going down an element chain like that. The " " is bad stuff, very inefficient, since it looks at all children, and not just direct descendants. Screw Win/IE :p.

[Spookster]

Originally posted by jkd
Screw Win/IE :p.

Bad jkd! ;)

[brothercake]

Originally posted by jkd
Screw Win/IE :p.

Oh there are times ....

But for some things though - advanced CSS that doesn't work in IE anyway, you may as well use CSS2 or even CSS3 selectors.

My current favourites (http://www.codingforums.com/showthread.php?s=&threadid=16367)

[meow]

There's a little more to this. ID has a much higher specificity than class. This is important for how the cascade works.

http://www.w3.org/TR/REC-CSS2/cascade.html#specificity
http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

[Spookster]

Originally posted by meow
There's a little more to this. ID has a much higher specificity than class. This is important for how the cascade works.

http://www.w3.org/TR/REC-CSS2/cascade.html#specificity
http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

Oh yeah? I dare you to try and say the word "specificity" 3 times fast. :D

[meow]

Dude, my English isn't native. I can't say it fast. :D

[Nightfire]

I can't even say it once, nevermind 3 times :p

I always wondered about the class and id things too

[Spookster]

Originally posted by Nightfire
I can't even say it once, nevermind 3 times :p

I always wondered about the class and id things too

I couldn't even type it. I had to copy and paste it. :D

[meow]

OK, I use WordWeb. Happy now? http://forums.yupapa.com/images/smiles/devious.gif

Actually, I've learnt to both spell and say it now but the first times I saw it I had to put my finger on the screen to be able to read it. :D