Alex Rivera | Logout

Several elements with the same ID responding to one CSS ID selector

Asked 2011-08-31T19:15:35.630
17

Is it safe to give several elements the same ID in one page? For example this often happens, when using some jquery plugins, when you run some slider or gallery twice or more. We know, developers like to give some ID to the html container in order the script works faster.

Let's read w3.org documentation:

What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element.

But the next example with 2 elements having the same ID works fine in all browsers, though it's not valid:

#red {
  color: red;
}
<p id="red">I am a red text.</p>
<p id="red">I am a red text too.</p>

Can anybody explain this strange situation?

html css css-selectors
Edit
Report

1 Answer

0

This works with simple HTML styling but will not work with queries.

From the jQuery API documentation:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

answered 2011-08-31T19:23:56.223

Your Answer