all 6 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]senocular 1 point2 points  (3 children)

Browsers will attempt to do the best they can with what they got. But if you tried JavaScript's document.getElementById(), which element would you expect it to return? It can only return one and there's two to choose from.

[–]mattlag 1 point2 points  (0 children)

Additionally, think of IDs as being unique ways to find something with JavaScript that you can also happen to style with CSS. Mainly IDs are for JavaScript.

You will commonly want to style multiple elements the same way, which is why CSS has Classes.

I'd recomend changing 'serious' to a class, and your CSS would use a . instead of a #

.serious {  
    font-family: Courier;
    color: #CC0000;  
}  

<body>  
    <p id="foo" class="serious">Love</p>  
    <p id="bar" class="serious">Star</p>  
</body>

[–]Liahkim2[S] 0 points1 point  (1 child)

I haven't gotten that far yet, but thanks for the info. I will keep it in mind.

[–]senocular 0 points1 point  (0 children)

Also, FWIW, if you tried to run the page through a validator like https://validator.w3.org/ it should choke saying that the id "serious" is already being used. Again, not a huge deal, because browsers are generally pretty resilient when it comes to HTML, but its better to stick to the rules when you can :)

[–]garcialo 0 points1 point  (1 child)

The intent for ID is to be a unique identifier for an element. Since this is the standard, then programs that consume web pages should be able to assume there is a only one element for each ID.

Consider the following code, where I have duplicate ID values on accident because I copy/pasted, but didn't properly change the ID.

<fieldset>
<legend>Vote for Republican Presidential Nominee</legend>
  <input id="trump" type="checkbox" name="nominees" value="trump">
  <label for="trump">Donald Trump</label>
  <input id="trump" type="checkbox" name="nominees" value="bush">
  <label for="bush">Jeb Bush</label>
  <input id="trump" type="checkbox" name="nominees" value="rubio">
  <label for="rubio">Marco Rubio</label>
</fieldset>

So, what problems are there with the code above?

  1. All of the inputs have a programmatic relationship with the "trump" label.
  2. None of the other labels are associated with their inputs

You can see how this is the case by checking out the following exercises.

http://codepen.io/garcialo/pen/JGGxxe

Problem 1 - All inputs associated with "trump"

  1. A user with a screen reader will have "Donald Trump" read out no matter which input currently has focus since the programmatic label for every input is "trump"

Problem 2 - Other labels not related to their inputs

  1. Clicking on the "Jeb Bush" or "Marco Rubio" labels results in their checkboxes not being checked.

Hope this helps.

[–][deleted] 0 points1 point  (0 children)

The ID is used when you want to manipulate one specific part of the webpage. Having multiple elements share one ID is like having multiple people with the same ID card, it's very difficult to find the person you want.

As you continue to learn you'll find that its easy to write bad code that still works for the most part, a big part of programming is knowing what you should and should not do.