Seems to me I figured this out once, can't remember now, but what is the functional difference between a class and an id? Seems for all intents and purposes they can be used almost interchangeably.
| SitePoint Sponsor |
Seems to me I figured this out once, can't remember now, but what is the functional difference between a class and an id? Seems for all intents and purposes they can be used almost interchangeably.
A class is a collection of elements that have the same name. An id is the name of one unique element. They are not interchangeable. You can only have one id per page but you can many elements with the same class name.
I am really confused apparently:
I define a style
without specifying that id to particular element,HTML Code:#style {background-color:#000066}
both will display with a bg color of 000066HTML Code:<span id="style">Blah</span> <br /> <p id="style">Blah2</p></body>
If I define .style the same way, and use class="style" on either element or both, output is exactly the same.
True, jake4974 -- On the other hand with different elements other than background-color you will find yourself in a twist. Practice correct coding, because you may find yourself boggled from something this simple! Its happened to me, Im not sure exactly WHY though :P
Hello
Yes there is not alot of difference, other than you can only use one id of the same name per page. Whereas you can use multiple classes.
Is not valid code. You have declared the same id 2 times within the same file.Code:<span id="style">Blah</span> <br /> <p id="style">Blah2</p></body>
is valid.Code:<span class="style">Blah</span> <br /> <p class="style">Blah2</p></body>
I generally use IDs for the layout elements of a site. Because I am only going to need them once per file.
For example:
Then I use classes for itmes that I may need to use multiple time within a file.Code:<div id="container"> Everything </div>
Code:<p class="red-text">This is some red text</p>Code:.red-text {color: #ff0000;}
"one id per page" if taken out of context might be misinterpretedOriginally Posted by drhowarddrfine
you can have as many ids per page as you wish, but they must all be different
p.s. i just adore your name, drhowarddrfine -- "for duty and humanity!"
I am still really confused.
Renders a span with the cascaded values over overline, lighter blue text, and a really dark blue bg.HTML Code:<head> <style type="text/css"> #style { text-decoration:overline; color:#0066FF} #style {background-color:#000066} .style {background:url(picture.gif)} </style> </head> <body> <span id="style">Blah</span> <br /> <p id="style">Blah2</p> <h3 class="style">Blah3</h3> </body> </html>
Same on the paragraph element.
Then on the h3 element a bg of pic.gif
I'm really confused by this whole "only one id per page" concept. As for valid code, I don't even really know what that means. Seems code is functional, dysfunctional, "proper" and "improper". This code is functional but improper I would say. Is that what you mean by invalid code?
Hi,
Try running that page through validator.w3.org's HTML validator, and it will outline the invalid code.
Take a look at this too: http://temp.egor-k.com/class_id/ There's one thing classes can do while ID's can't.
No offense, but I think my point was missed. Really the W3C "validator" checks propriety. Validity is a word used mainly to describe a level of efficacy : "Producing the desired results; efficacious". "Validity" is used invalidly in this situation. Technically you would only run valid (functional) code through the "validator".
Last edited by jake4974; Jan 8, 2006 at 00:28.
Okay, now that qualifies as neat
Hello
you can combine classes , concatenate
<div class=”class1 class2 class3 class4”>12345</div>
Posting Permissions
Bookmarks