SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: How do IDs work

  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    How do IDs work

    If you have the same named ID in two separate files, what happens?

    For example...

    page_1.html
    Code HTML4Strict:
    <body>
    	<div id="wrapper">


    page_2.html
    Code HTML4Strict:
    <body>
    	<div id="wrapper">


    style_sheet.css
    Code css:
    #wrapper{ }



    Debbie

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The ID is unique on a per (x)html document basis only. So obviously whatever CSS you have will be applied for #wrapper for each page. So let's say that CSS makes text red then on both pages text would be red for each matching ID respectively but obviously you can only have one ID (with that exact name) per HTML file.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    THEY LET U INTO BARS!

    ==XD

    seriously tho.

    IDs must be unique. Which means you can use an ID once in a specific document or page ( you can use the same ID once per page through a site, if you wish). You probably noticed that this really doesn't matter ( if you use an ID in the same way you do a class , you wont notice the difference as far as CSS goes ). However it will fail validation AND more importantly it WILL MESS UP any javascript that relies on ID to target an element.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    THEY LET U INTO BARS!

    ==XD



    seriously tho.
    It wasn't a dumb question...


    IDs must be unique. Which means you can use an ID once in a specific document or page ( you can use the same ID once per page through a site, if you wish). You probably noticed that this really doesn't matter ( if you use an ID in the same way you do a class , you wont notice the difference as far as CSS goes ). However it will fail validation AND more importantly it WILL MESS UP any javascript that relies on ID to target an element.
    I was asking if it would be okay to have #WRAPPER in ever page or if I had to make it .WRAPPER or #WRAPPER1, #WRAPPER2,...



    Debbie

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

    I was asking if it would be okay to have #WRAPPER in ever page or if I had to make it .WRAPPER or #WRAPPER1, #WRAPPER2,...
    As Robert said an id must be unique inside each individual page but you can use the same id on every page of your site. You just can't have the same id twice in any one page as then it won't be unique on that page.

    Otherwise we would soon run out of words to use if every page needed different ids

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Robert said an id must be unique inside each individual page but you can use the same id on every page of your site. You just can't have the same id twice in any one page as then it won't be unique on that page.

    Otherwise we would soon run out of words to use if every page needed different ids
    And CSS files would become massive!

    When you're looking at page1.htm with <div id="wrapper">, there's no way at all for the browser to know that page2.htm also has <div id="wrapper"> and calls up the same CSS file ... so there's no way that it could cause any conflict or problem.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Sorry , I couldnt resit the joke earlier.. too much sugar.


    I think I said this too:
    ( you can use the same ID once per page through a site, if you wish).
    == : )

    In short:
    1) IDs can only be used once per page
    2) You ARE ALLOWED to use the same ID on different pages ( documents) throughout the site
    3) SOMETIMES, it may be advantageous to make SOME IDs (or even a class) unique to throughout the entire the site. This is not a requirement for validation, merely a good technique. the neat thing about this method is you can now target items based on the page with the same style sheet!

    example <body id="page_1">
    <body id="page_2">
    <body id="page_3">


    #page_3 #menuItem_3 ,#page_2 #menuItem_2,#page_2 #menuItem_2 { Styles for current page item}

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Otherwise we would soon run out of words to use if every page needed different ids
    True, but it wasn't clear to me until now.

    Thanks,


    Debbie

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    3) SOMETIMES, it may be advantageous to make SOME IDs (or even a class) unique to throughout the entire the site. This is not a requirement for validation, merely a good technique. the neat thing about this method is you can now target items based on the page with the same style sheet!
    I have been doing both, but wasn't sure.

    I have #wrapper in several pages, but maybe #slideshow only once in my website.


    Debbie


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
  •