SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How urgent is correcting "id" selector used for more than one element on same page?

    Hello;

    Below is an excerpt that I found while reading over the article "Frequently Asked Questions About HTML."
    http://www.sitepoint.com/forums/showthread.php?t=428205

    Just over half way down the page the article makes reference of the use of "id" and "class" in an Html document. The article says that you can use the "id" selector only once per page:
    What is the difference between CLASS and ID?

    .... We assign IDs to page elements that can occur at most once per page, like a navigation menu, a footer, a sidebar, etc. ...
    I have got a mistake in my style sheet coding. I have used the "id" selector twice on the same page. One "id" selector is used to denote style attributes for a text box. The other "id" reference is used to denote style attributes for a drop-down menu.

    Here's what it looks like:
    PHP Code:
    <head>
    <
    style type="text/css">
    <!--
    #input1 { font-family:courier new, courier, monospace; font-size:12px }
    #input2 { font-family:"courier new", courier, monospace; font-size:12px ; text-align: center}
    -->
    </
    style>
    </
    head>

    <
    body>
    // id selector "input1" is used for a text box
    <input type="text" id="input1" name="FirstName" maxlength="32" size="25">
    <
    input type="text" id="input1" name="LastName" size="25" maxlength="32">
    <
    input type="text" id="input1" name="Address" size="25" maxlength="50">

    // id selector "input2" is used for a select menu
    <select id="input2" name="Question">
    <
    option value="Question One">Question One?</option>
    <
    option value="Question Two">Question Two?</option>
    <
    option value="Question Three">Question Three?</option>
    </
    select>
    </
    body
    I have got an old Windows Me operating system. The text boxes and drop down menus work fine in both the Firefox and IE browsers with my old computer. I've not tested my web site much with newer computers.

    My question is this: How urgent is it that I go through and update my web site with proper style coding?

    Thank you in advance.
    Last edited by Volitics; Mar 17, 2007 at 13:28. Reason: typo
    .

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having multiple ID selectors on a page is fine, you just can't have the same value used more than once.

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right now I'm starting to work on an overhaul of my web site. But it's going to take a couple of months.

    The id selectors look like they're working ok on my computer. Of course I don't know how it might look on other computers.

    I'm just trying to figure out if (or how) it might impair the functionality. My web site has got a user control panel with a lot of boxes. If it is not going to interfere with users I think I will leave it alone until my upgrade.
    .

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    id="input1"
    id="input2"

    is allowed as they are two different ids

    id="input1"
    id="input1"

    is an error because the same id appears twice and is only allowed once.

    You can have as many different ids in a page as you like as long as each one is a unique value starting with a letter and containing only letters numbers and underscores.

    If you want to apply the same style to multiple elements use a class. You can apply the same class to as many elements as you like and can even apply multiple classes to the same element.

    class="myclass1"
    class="myclass1 myclass2"
    class="myclass2"

    applies myclass1 to the first two and myclass2 to the last two (with both being applied to the one in the middle and with class2 overruling class1 if there are conflicts in applying them both).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use ID selectors in all of my sites, it's just that I make sure that they don't have the same value repeated throughout.

    For example, id="header" id="menu" id="content" id="sidebar" id="footer" is fine, but id="content" and id="content" is not (since the same ID value is used twice). In that case, I'd use a class. In fact, with the DIV that has the ID of content, I'll use that as the container for the content, then give each section of that part of the page a class with a value of "section" (semantic markup to the rescue again!).

    Here's another example:
    HTML Code:
    <div id="content">
    	<h2>Content Heading</h2>
    	<div class="section">
    		<h3>Section Heading</h3>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer
    			adipiscing elit. In quis erat. Nulla auctor
    			consectetuer erat. Sed est tellus, laoreet et,
    			faucibus et, cursus ut, lectus. Nulla
    			scelerisque, mi vel commodo consequat, turpis
    			ligula congue ligula, eget pellentesque turpis
    			augue quis diam. Nulla facilisi. Etiam commodo
    			quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in,
    			egestas vel, commodo bibendum, est. Donec sit
    			amet justo et leo tincidunt rhoncus. Cras
    			aliquam sapien eget nisl. Maecenas vitae arcu
    			et mi gravida porta. Nullam ultricies tempor
    			magna. Sed vel tellus. Etiam sagittis est
    			sagittis odio. Etiam mollis mi ac lacus.
    		</p>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer
    			adipiscing elit. In quis erat. Nulla auctor
    			consectetuer erat. Sed est tellus, laoreet et,
    			faucibus et, cursus ut, lectus. Nulla
    			scelerisque, mi vel commodo consequat, turpis
    			ligula congue ligula, eget pellentesque turpis
    			augue quis diam. Nulla facilisi. Etiam commodo
    			quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in,
    			egestas vel, commodo bibendum, est. Donec sit
    			amet justo et leo tincidunt rhoncus. Cras
    			aliquam sapien eget nisl. Maecenas vitae arcu
    			et mi gravida porta. Nullam ultricies tempor
    			magna. Sed vel tellus. Etiam sagittis est
    			sagittis odio. Etiam mollis mi ac lacus.
    		</p>
    	</div>
    	<div class="section">
    		<h3>Section Heading</h3>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer
    			adipiscing elit. In quis erat. Nulla auctor
    			consectetuer erat. Sed est tellus, laoreet et,
    			faucibus et, cursus ut, lectus. Nulla
    			scelerisque, mi vel commodo consequat, turpis
    			ligula congue ligula, eget pellentesque turpis
    			augue quis diam. Nulla facilisi. Etiam commodo
    			quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in,
    			egestas vel, commodo bibendum, est. Donec sit
    			amet justo et leo tincidunt rhoncus. Cras
    			aliquam sapien eget nisl. Maecenas vitae arcu
    			et mi gravida porta. Nullam ultricies tempor
    			magna. Sed vel tellus. Etiam sagittis est
    			sagittis odio. Etiam mollis mi ac lacus.
    		</p>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer
    			adipiscing elit. In quis erat. Nulla auctor
    			consectetuer erat. Sed est tellus, laoreet et,
    			faucibus et, cursus ut, lectus. Nulla
    			scelerisque, mi vel commodo consequat, turpis
    			ligula congue ligula, eget pellentesque turpis
    			augue quis diam. Nulla facilisi. Etiam commodo
    			quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in,
    			egestas vel, commodo bibendum, est. Donec sit
    			amet justo et leo tincidunt rhoncus. Cras
    			aliquam sapien eget nisl. Maecenas vitae arcu
    			et mi gravida porta. Nullam ultricies tempor
    			magna. Sed vel tellus. Etiam sagittis est
    			sagittis odio. Etiam mollis mi ac lacus.
    		</p>
    		<p>
    			Lorem ipsum dolor sit amet, consectetuer
    			adipiscing elit. In quis erat. Nulla auctor
    			consectetuer erat. Sed est tellus, laoreet et,
    			faucibus et, cursus ut, lectus. Nulla
    			scelerisque, mi vel commodo consequat, turpis
    			ligula congue ligula, eget pellentesque turpis
    			augue quis diam. Nulla facilisi. Etiam commodo
    			quam in metus. Etiam nec nisi ac nisl molestie
    			fermentum. Donec ligula ipsum, venenatis in,
    			egestas vel, commodo bibendum, est. Donec sit
    			amet justo et leo tincidunt rhoncus. Cras
    			aliquam sapien eget nisl. Maecenas vitae arcu
    			et mi gravida porta. Nullam ultricies tempor
    			magna. Sed vel tellus. Etiam sagittis est
    			sagittis odio. Etiam mollis mi ac lacus.
    		</p>
    	</div>
    </div>

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have id="input1" in three instances in that markup, and that's not good. It may work with CSS in some browsers, but you'll run into problems if you try to use the getElementById() function in JavaScript.

    An ID must be unique within the document ("page"). If you want to use a common CSS rule for several elements, use a class instead. In this case, change id="input1" into class="input1" (or find a better name!). Then change the CSS selector from #input1 to .input1.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.
    .


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
  •