CSS ID vs Class

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

Regarding class selectors vs id selectors:

when creating a box with CSS is it more appropriate to write that as an ID or as a class? For instance, lets say you have a navigational box that is 200px by 100px on the left side of the screen, only used for your site navigation. Should that box be written as a class or as an ID? Or, does it really matter at all?

Mark
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I've decided that ID and class should be used for organization.

Say you have four tables that you all want to have almost identicle looks, except the font, but instead of copy and pasting the css thrice, you can use id's like so:

Code: [ Select ]

<table class="cool_tables" id=1>
</table>
<table class="cool_tables" id=2>
</table>
<table class="cool_tables" id=3>
</table>
  1. <table class="cool_tables" id=1>
  2. </table>
  3. <table class="cool_tables" id=2>
  4. </table>
  5. <table class="cool_tables" id=3>
  6. </table>


That way you can change the minor aspect without having to have three times as much css.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

An ID is typically used for a single instanced container/object, while a class is applied to many objects.



i think.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

That is exactly right.

ID = One Instance
Class = Multiple Instances
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

hence the terms,
ID = one student.
Class = many students.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

joebert wrote:
hence the terms,
ID = one student.
Class = many students.


well now, isn't that clever! i never would have made that connection, but it does make sense now.

what defines a single instance? Is it a single instance per site or single instance per page?

mark
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Per page.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Quote:
well now, isn't that clever! i never would have made that connection, but it does make sense now.


Me either lol, this topic made me think of it :oops:
Actually i usally use class for styles and id as javascript reference, EX:
(note i know i forgot some things)
Code: [ Select ]
function updateTitle(newTitle) {
   title.innerHTML = newTitle;
}

<style>
.titlebar {FILTER: alpha(opacity="75"); font-family: Verdana; font-size: 20px; color: #123456;}
</style>

<div class="titlebar" id="title"> First Title </div>

<a href="previews/whatisOZZU.asp" onMouseDown="updateTitle('Got OZZU ?');" target="namedIFRAME">What is OZZU ? </a>
  1. function updateTitle(newTitle) {
  2.    title.innerHTML = newTitle;
  3. }
  4. <style>
  5. .titlebar {FILTER: alpha(opacity="75"); font-family: Verdana; font-size: 20px; color: #123456;}
  6. </style>
  7. <div class="titlebar" id="title"> First Title </div>
  8. <a href="previews/whatisOZZU.asp" onMouseDown="updateTitle('Got OZZU ?');" target="namedIFRAME">What is OZZU ? </a>
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

You can still use ID CSS'ing more then once correct? like have two tags with an ID of 5, even though that isn't what it is meant for I am sure it can be used that way.


I think in the Minds of CSS the properties probably go like this:

Tag
Class
ID
Inline


I'll check w3c later...wanna go play some xbox and make a Van deGraaff generator ;)
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

i'm sure it would work, but i don't think you're supposed to. i wonder if it would validate to use an ID more than once?

Mark
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

W3C Says exactly what we have said, ID must be unique, that doesn't mean it wont work, but it wont be to standards.

http://www.w3.org/TR/REC-html40/struct/ ... -and-class
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I tried it just to see what would happen, and it works with CSS, but the document won't validate if an id is used more than once within that document. In other words the style information is valid, but the html containing the multiple instances of the same id is not.

Another potential problem is that it won't work properly if you use javascript to access elements referred to by the same id. If there is more than one unique instance, only the first instance will be used and the others will be ignored (at least in IE6, Moz 1.5, and Opera 7).

I generally use class with CSS, since I may want to apply it to a different element within the same document at a later time, and id with unique elements that I want to access through code. The exception for me has been using css for layout, which is something I am learning. I have started using id with css for elements that are unique within a document by their nature (i.e. a column like "mainContent").

It would be poor programming practice to use the same id more than once in a document because by definition it is supposed to refer to a unique instance. You may also decide to access that id through code at a later time and get unexpected results. If you stick to the standards then you can use the W3C validator to spot errors in your code, which I think is extremely handy.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

I avoid using both as much as I can.
Use the cascade!
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

LazyJim wrote:
I avoid using both as much as I can.
Use the cascade!


care to elaborate for those of us who are n00bs to CSS? :D

mark
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

allgoodpeople wrote:
care to elaborate for those of us who are n00bs to CSS? :D


of course (although I'm a n00b too)!

The idea is to use the seclector part off each CSS rule to it's fullest potential...
for example, if all your links should be blue-on white in the body of your site, but white-on-blue in the navigation menu, most n00bs (and I think most WYSIWYG editors) would use add class="..." for EVERY link in the nav section, but if you can identify the nav section then you can set rules for any element that is inside the nav section, and so in your HTML code the links all look the same:
Code: [ Select ]
<html>
<head>
    <STYLE>
        a { /* Set the style for links */
            color: blue;
        }
        #nav { /* Give the nav section a blue border so you can see it easily */
            border: solid blue 2px;
        }
        
        #nav a { /* Set the style for links inside the nav section */
            color: white;
            background-color: blue;
        }
    </STYLE>
</head>
<body>
    <DIV id="nav">Navigation menus are best marked up in a list, but here is just some text and <a href="#">link</a> and some more text...
    </DIV>
body text body text... including a <a href="#">link</a> and more text...
</body>
</html>
  1. <html>
  2. <head>
  3.     <STYLE>
  4.         a { /* Set the style for links */
  5.             color: blue;
  6.         }
  7.         #nav { /* Give the nav section a blue border so you can see it easily */
  8.             border: solid blue 2px;
  9.         }
  10.         
  11.         #nav a { /* Set the style for links inside the nav section */
  12.             color: white;
  13.             background-color: blue;
  14.         }
  15.     </STYLE>
  16. </head>
  17. <body>
  18.     <DIV id="nav">Navigation menus are best marked up in a list, but here is just some text and <a href="#">link</a> and some more text...
  19.     </DIV>
  20. body text body text... including a <a href="#">link</a> and more text...
  21. </body>
  22. </html>
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

That's quite good advice about taking advantage of the cascading quality of CSS. ;)

I've seen many people write lengthy selector definitions that rival complex table layouts in size and scope.

Excellent point, I think.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

Yeah they are very powerfull, and the new selectors coming will make things immensly powerful!

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.