SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: class vs id

  1. #1
    SitePoint Zealot Darren Lewis's Avatar
    Join Date
    Jul 2002
    Location
    UK
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    class vs id

    I'm stating to be more adventurous with my CSS, but I'm confused over the differences between the class attribute and the id attribute. They seem to do the same thing to me

    Anyone able to clarify?

    Thanks.
    Censura - Add reviews and ratings to your site

  2. #2
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Classes can be applied to multiple elements. Only one element can have the same ID, though.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by M. Johansson
    Classes can be applied to multiple elements. Only one element can have the same ID, though.
    Not true! If you have two elements with the same ID they will just have the same styles set to them. While I agree that classes are the better choice if more than one element will be styled in this way, it is not necessary and the ID can instead be used.

    --Vinnie

  4. #4
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually Vinnie, according to W3C standards you may only use an ID once per element, for anything more than that you should use classes...

    http://www.w3.org/TR/xhtml1/#h-4.10

    Specifically:

    In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element.

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One great reason for using ONE object per ID is that dHTML allows you to interact with elements which have IDs. Looking at it another way a class is a group of elements (links; bold, red text; etc.). ID is a "name" for an element if you will.

    So, if you said:

    <div id="myID">
    This is some content here
    </div>

    you could dynamically change anything about that container (the DIV). You could even affect the content contained WITHIN the DIV.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Wizardx8
    Actually Vinnie, according to W3C standards you may only use an ID once per element, for anything more than that you should use classes
    Actually Vinnie was right. You have misunderstood his point.

    It is true that an element may only have a single ID.
    Several elements may use the same ID.

    Code:
    <html>
    <head>
    	<title>Untitled</title>
    	<style type="text/css">
    	
    	#yellow {
    	position: absolute;
    	background: #fc0;
    	border: 1px dotted #333;
    	width: 100px;
    	height: 100px;
    	top: 0;
    	}
    	
    	.first {
    	left: 10px;
    	}
    	
    	.second {
    	left:200px;
    	}
    	
    	</style>
    </head>
    <body>
    <div id="yellow" class="first"></div>
    <div id="yellow" class="second"></div>
    </body>
    </html>
    The properties set in the #yellow will be used/shared by both divs.

    That is what Vinnie was saying and that is correct.

    Creole's caveat also stands though. If the same ID is used on several elements, then only the earliest coded element with that ID will respond to javascript/dhtml. Other elements using the same ID will not react at all.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill...while you and Vinnie are correct, the questions is raised as to WHY you would want to reuse an ID. There are no benefits to using an ID over a class for multiple elements. And given the fact that you can interact with only ONE of a group of elements which use the same ID using dHTML, then it makes no sense to do so.

    Use code for it's intended purposes and yo'll save yourself trouble down the road.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters

    ...
    Several elements may use the same ID.
    ...
    They can but your html/xhtml wouldn't be valid. I'm with Wizardx8 on this.

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're misrepresenting my point.

    I wasn't taking sides. I wasn't even commenting on the right and wrongs of their use or whether a person should or shouldn't use shared IDs.
    I was just addressing the misunderstanding that Wizardx8 had of Vinnie's statement and the factuality behind it.
    It was merely a point of technical accuracy.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill, while I understand that yes, all elements with the same id will inherit the styles, it is breaking the page, as it will not validate, so is incorrect to use them in that way.
    Jordan Windebank

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While validation might matter to both you and I, a brief look behind a great many large and small sites will show that not everyone sees it as the holy grail.

    Sites will often render consistantly well cross-browser/platform regardless of whether or not they 'validate'.
    Popularity is not even effected in most cases. Yahoo.com fails validation miserably, but even despite it being 'incorrectly' coded it is still one of the most popular sites on the web and still renders consistantly across browsers/platforms.

    My own coding preference is for w3c xhtml strict. However, my own folio site's main page (with dhtml navigation) omits the DTD. I am forced to do so as including it 'breaks' some of the (valid) javascript used on that page and kills the navigation.
    In this case, it is the requirements set by the validation process that are responsible for 'breaking' the page, not the code itself.

    Many designers/developers 'choose' invalid pages over valid ones for a range of 'valid' reasons.
    DTD problems lead them to be omitted (invalid), proprietory css (invalid), font tags (invalid), omission of alt tags (invalid), ...
    Despite these examples being invalid, few of them will have significant consequences on how capable a page is of being rendered well across browsers/platforms.

    My own folio site, despite being technically invalid due to the omission of a DTD, performs consistantly well across browsers/platforms (give or take the odd limitation in the Opera DOM support).
    Fwiw, it validates according to w3c xhtml on all points, failing only on the absence of a DTD.

    Even the brief code example I gave earlier renders consistantly across Mozilla, IE and Opera despite being invalid on several counts.

    At the end of the day, it all depends on where you set your sights.
    A few minutes behind the scenes of a typical range of sites will show, however ideal validation may be to you and I, not everyone shares our goals.

    After all, if it works, it works.

    Just a (protracted) thought.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill, while I do agree that validation is not something that your average user thinks about, we are talking about a forum where people are trying to learn how to do things the correct way. If I go by your statement of "After all, if it works, it works." then should we still tell people to use the <font> tag?

    Or if you saw a post where someone asked how to change the font color, and another member posted to use the <font> tag, would you correct them? It is just bad practice for something that makes absolyutely no difference in which browesr it is used. It is not as if using the ID and Class attributes properly will break a site viewed in anything...

    Just my point of view on the matter, I think members here have a responsibility to answer questions using correct methods, than continuing to show people howe to use "hacks" or code in ways that were not meant to be...

    Jordan Windebank

  13. #13
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    J.H.C, round and round and round it goes...

    Originally posted by Wizardx8
    Bill, while I do agree that validation is not something that your average user thinks about, we are talking about a forum where people are trying to learn how to do things the correct way. If I go by your statement of "After all, if it works, it works." then should we still tell people to use the <font> tag?
    No, but I also wouldn't infer that <font> tags won't work (at least, not while they do still do).

    Don't get me wrong (again), I'm staunchly in favour of standards. I'm even, to a certain degree, evangelical about them and will 'recommend' them over all other methods.
    However, I'm not one to leave misleading information uncorrected, even if it would suit my own goals to do so.

    I basically feel it's better to give people *all* the info and let them make their own minds up about what matters to them and what is right and wrong for their sites and their audiences.
    There's absolutely nothing wrong with recommending w3c methods. I just feel that there's no need to (wrongly) infer that other methods 'won't' work in order to make the point about why we 'should' be using w3c standards.

    More knowledge enables a designer/developer to make intelligent decisions *for the right reasons*.
    Increasing the degree of intelligent decision-making that goes into web design is a goal I think we both share.
    I'd rather see decisions being made for the right reasons when both options appear funtionally identical.

    Let's not forget that Vinnie (and later myself) only stated that shared IDs *can* be used, not that they *should* be.
    That, it is repeatedly being forgotten, was the extent of the post.


    I really think we three are aiming for the same target, just shooting from slightly different angles.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  14. #14
    Wanna-be Apple nut silver trophy M. Johansson's Avatar
    Join Date
    Sep 2000
    Location
    Halmstad, Sweden
    Posts
    7,400
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I feel that there has been too many words written about this now.
    Mattias Johansson
    Short, Swedish, Web Developer

    Buttons and Dog Tags with your custom design:
    FatStatement.com

  15. #15
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters
    I really think we three are aiming for the same target, just shooting from slightly different angles.
    Agreed

    Originally posted by M. Johansson
    I feel that there has been too many words written about this now.
    And agreed
    Jordan Windebank


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •