19 {{ upvoteCount | shortNum }}
19 {{ upvoteCount | shortNum }}

Can I use the same DIV id multiple times/page?

by shipwrecked
13 replies
Hi,

I am having issues with a W3 code validator, which gives me errors. Because, I am using the same DIV id's multiple times per page.

It's obvious to me that the same type of DIV can repeat itself 3-4 times on the same page.

But the W3 validator tells me something that makes me believe: multiple DIVs with the same id cannot be used on the same page?
#div #multiple #times or page
  • Profile picture of the author Brandon Tanner
    No, each ID has to be unique. If you want to use the same group of styles for multiple DIV's, that's what classes are for.

    http://www.w3schools.com/css/css_id_class.asp
    Signature

    {{ DiscussionBoard.errors[7480737].message }}
  • Profile picture of the author Rideem3
    No, they can't. An ID is a single element's identifier.

    In JavaScript, if you have multiple elements with the same ID, document.getElementById would return the first occurrence of that ID.
    {{ DiscussionBoard.errors[7481994].message }}
  • Profile picture of the author shipwrecked
    So then what if I need the EXACT SAME DIV setting to appear 4-5 times per page?

    Do I give it different id's? Oh, or did I make a mistake by not using classes?
    {{ DiscussionBoard.errors[7482970].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by shipwrecked View Post

      So then what if I need the EXACT SAME DIV setting to appear 4-5 times per page?

      Do I give it different id's? Oh, or did I make a mistake by not using classes?
      Like I said, you want to use classes for that. And classes are completely independent of ID's. You don't have to use an ID at all in a div if you don't want to.

      Let's say you define a class in your CSS file named "bigfont"...

      .bigfont {
      font-size: 48px;
      font-weight: bold;
      font-family: Arial;
      }

      Then for any div where you want to use that class you simply do this...

      <div class="bigfont">

      Also, you can combine multiple classes in a div, if you want. For example, if you also have a class named "red", then you can do this...

      <div class="bigfont red">
      Signature

      {{ DiscussionBoard.errors[7483668].message }}
  • Profile picture of the author Rideem3
    That's what classes are for.
    {{ DiscussionBoard.errors[7483165].message }}
  • Profile picture of the author Rideem3
    You can style two ID's the same way also if you need to do this for some reason:
    Code:
    #id1, #id2 {
/*Code here*/
}
    {{ DiscussionBoard.errors[7483686].message }}
  • Profile picture of the author shipwrecked
    Meanwhile I just changed the id's to classes and in the CSS changed from "#" to "." near the elements, like:

    from:

    #red

    to:

    .red

    Now it works fine! Thank you all for helping!
    {{ DiscussionBoard.errors[7486685].message }}
  • Profile picture of the author johndoejohndoe
    You can, but you definitely shouldn't.
    Signature
    Mobile App. and Game Development under $1,000 ~ GrapedStudios.com
    {{ DiscussionBoard.errors[7488857].message }}
  • Profile picture of the author shipwrecked
    The problem is that if I name a DIV, like "red", then I cannot use it somewhere as "class", elsewhere as "id". One id and one class. Doesn't work.

    I can either use "red" as 1 id on the same page.
    Or: multiple times as class.
    {{ DiscussionBoard.errors[7491686].message }}
  • Profile picture of the author SteveJohnson
    There is no rule against using a class name that is identical to an id. You just can't use the id more than once as an id: <div id="thisid">

    This is perfectly fine:
    <div id="thisid" class="thisid"></div>
    <div id="anotherid" class="thisid"></div>
    <div id="onemoreid" class="thisid"></div>

    When the characters 'thisid' are in a class attribute, they have no connection or correlation with any ids on the page.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7493682].message }}
  • Profile picture of the author shipwrecked
    Fine, I'm using classes and id's separately - as required. I repeat classes, I'm not repeating id's. Thanks to anyone who helped!
    {{ DiscussionBoard.errors[7519955].message }}
  • Profile picture of the author JoshuaReen
    excellent topic. i'm not here to answer, but today, i learned difference between class and id in css. i have been working on css for the last 1 year, but wasn't aware of this difference. thanks for such such a nice topic and comments.
    {{ DiscussionBoard.errors[7520207].message }}
  • Profile picture of the author VictorDamasio
    No, you can't. Should use classses instead.
    {{ DiscussionBoard.errors[7524112].message }}

Trending Topics