SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: class vs id

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    class vs id

    After reading up on the use of class and id, I really can not find anything that gives a reason/benefit of using id. With everything I tried, class worked just as good, so now I'm wondering why not always simply use class.
    Is there anything I missed where id offers a benefit over class?

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,372
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Stevie D made some good points on the subject in another thread:
    Quote Originally Posted by Stevie D View Post
    • An ID is more specific than a class, so if you have conflicting style rules (where two rules giving contradictory styles apply to the same element) then a rule that uses an ID will usually outrank a rule that just uses classes.
    • You can use an ID for an internal link (eg <a href="#section1"> jumps to the item with id="section1".
    • If you're using it as a Javascript hook, getElementByID is better supported than getElementByClass, so you should use an ID.


  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks Techie, I'll have a read of that.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There are also common design patterns that are used.

    For example, forms have an id attribute added to them, to provide a handy way for scripts to access their named elements.

    HTML Code:
    <form id="register">
        <p><label>First name: <input type="text" name="firstname"></label></p>
        ...
    </form>
    That way a script can easily access the form elements, with:

    Code javascript:
    var form = document.getElementById('register');
    form.onchange = function () {
        var form = this,
            firstName = form.elements.firstname;
        // do stuff with firstName.value
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,598
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    My understanding is that ID is supposed to identify an element that's unique within the page. A given ID will occur at most once in the page, whereas a given class can occur as many times as needed.

    Mike

  6. #6
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Dhaka, Bangladesh
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The class selector allows us to label related part of a HTML document. On the other hand, an id selector can be used to target individual elements. If you're still confused you may want to read this post.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Aside from ALL that has been said so far; an ID may also add a functionality hook for .js or serve to identify an input on a form, as in <label for="IDname"><input type='text' id='IDname' name='IDname> You MUST have that ID to link with the for attribute on the label.

    Also serve as fragments. That is you can direct a link to an ID! <a href='#IDname'>Jumps to IDname </a>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    You MUST have that ID to link with the for attribute on the label.
    That only applies if you're supporting the now dead IE6 web browser which fails to understand implicit label association.

    Explicit label association:
    HTML Code:
    <label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname">
    <label for="lastname">Last name:</label> <input type="text" id="lastname" name="lastname">
    Implicit label association:
    HTML Code:
    <label>First name: <input type="text" name="firstname"></label>
    <label>Last name: <input type="text" name="lastname"></label>
    Some reasons why I prefer to use implicit association are:
    • IE6 is dead. Let it lie
    • It results in simpler HTML code that is easier to read
    • The "side-effect" of explicit association is lots more ID attributes scattered throughout your forms


    Also, the potential loss of not using explicit association is that people using the IE6 web browser won't be able to click on the text to select a form element, they will have to click on the form element instead, which I am okay with given the better maintainability that is found from using implicit association instead.
    Last edited by paul_wilkins; Sep 22, 2012 at 14:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Actaully, explicit label association doesnt seem to work on my MAC safari and FF. :/

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by paul_wilkins View Post

    Some reasons why I prefer to use implicit association are:
    • IE6 is dead. Let it lie
    • It results in simpler HTML code that is easier to read
    • The "side-effect" of explicit association is lots more ID attributes scattered throughout your forms
    I always avoid wrapping labels around the form controls as it has been documented to cause quite severe accessibility problems. Whether or not that is still true today I don't know but once you've learned a habit it sticks.

    Another downside of wrapping the label is that you lose control over styling the text as you have no unique element to target and authors end up inserting a span which defeats the original purpose of that structure.

    Of course both methods are valid either way.

  11. #11
    Non-Member
    Join Date
    Aug 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A class can be used several times, while ID can be used only once. ID is a unique identifier to an element.

  12. #12
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by arunt View Post
    A class can be used several times, while ID can be used only once. ID is a unique identifier to an element.
    Yes, I know that. The question was not what the deifinition is, but to give an example of a situation where the use of ID has a distinct advantage over the use of class.
    So far, it only seems to be with the use of input functions.

  13. #13
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,372
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by benbob View Post
    So far, it only seems to be with the use of input functions.
    And for internal links. And when you want to increase the specificity of a rule.


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
  •