Page 50 - HTML5

.special.left.menu { color: pink; }

Giving an element an ID

The ID attribute of an element is an identifier which must be unique in the whole document. Its
purpose is to uniquely identify the element when linking (using an anchor), scripting, or styling
(with CSS).

<div id="example-id"></div>

You should not have two elements with the same ID in the same document, even if the attributes
are attached to two different kinds of elements. For example, the following code is incorrect:

<div id="example-id"></div>
<span id="example-id"></span>

Browsers will do their best to render this code, but unexpected behavior may occur when styling
with CSS or adding functionality with JavaScript.

To reference elements by their ID in CSS, prefix the ID with #.

#example-id { color: green; }

To jump to an element with an ID on a given page, append # with the element name in the URL.

http://example.com/about#example-id

This feature is supported in most browsers and does not require additional JavaScript or CSS to
work.

Problems related to duplicated IDs

Having more than one element with the same ID is a hard to troubleshoot problem. The HTML
parser will usually try to render the page in any case. Usually no error occurs. But the pace could
end up in a mis-behaving web page.

In this example:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

CSS selectors still work

#aDiv {
color: red;
}

But JavaScript fails to handle both elements:

https://riptutorial.com/ 34