SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Silly question potential!!!

    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.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am really confused apparently:
    I define a style
    HTML Code:
    #style {background-color:#000066}
    without specifying that id to particular element,
    HTML Code:
    <span id="style">Blah</span> <br />
    <p id="style">Blah2</p></body>
    both will display with a bg color of 000066
    If I define .style the same way, and use class="style" on either element or both, output is exactly the same.

  4. #4
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <span id="style">Blah</span> <br />
    <p id="style">Blah2</p></body>
    Is not valid code. You have declared the same id 2 times within the same file.
    Code:
    <span class="style">Blah</span> <br />
    <p class="style">Blah2</p></body>
    is valid.

    I generally use IDs for the layout elements of a site. Because I am only going to need them once per file.
    For example:
    Code:
    <div id="container">
    Everything
    </div>
    Then I use classes for itmes that I may need to use multiple time within a file.
    Code:
    <p class="red-text">This is some red text</p>
    Code:
    .red-text {color: #ff0000;}

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,332
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by drhowarddrfine
    You can only have one id per page
    "one id per page" if taken out of context might be misinterpreted

    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!"
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am still really confused.
    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>
    Renders a span with the cascaded values over overline, lighter blue text, and a really dark blue bg.
    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?

  8. #8
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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.

  9. #9
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    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.

  10. #10
    Non-Member jake4974's Avatar
    Join Date
    Jan 2006
    Location
    Down the road, it's where I'll always be
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Okay, now that qualifies as neat

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    you can combine classes , concatenate

    <div class=”class1 class2 class3 class4”>12345</div>


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
  •