Selector API - ID (Unique Identifier) attribute

About

The ID selector is a selector that match the elements with the given ID attribute

Normally, an ID can be used only once each in a document but if it's not the case, the selectors will still return all the elements matching the criteria.

Articles Related

Syntax

ID selector are composed of a:

a hash mark.
and the id name

/* Selects the first element with ID "header"  */
#header     
/* Selects element with ID "nav"  (ie for a navigation bar) */
#nav

Demo

Two elements with the same ID

The HTML

<p id="TheId">This one is the first element with the id "TheId"</p>
<p id="TheId">This one is the second element with the id "TheId"</p>

The CSS

#TheId { color:blue; } /* The two p elements with the same ID will be blue, not only the first one */

The result, the two elements are blue:

Rendered by WebCode

Tag and ID selector

The HTML

<p id="TheId">A p element with the id "TheId"</p>
<div id="TheId">A div element with the id "TheId"</div>

The CSS with a tag selector and an Id selector (This is an AND logical predicate and it's called an intersection in the selector API)

p#TheId { color:blue; } /* Only the P element with the id attribute TheId will be blue */

Rendered by WebCode

With Descendant selector to animate a menu

The HTML

<ul id="HeaderMenu" > 
   <li><a href="category/obiee/" >OBIEE</a></li>
   <li><a href="category/owb/">OWB</a></li>
   <li><a href="category/datawarehouse/">DataWarehouse</a></li>
   <li><a href="category/oracle_database/">Oracle Database</a></li>
</ul>

The CSS

ul#HeaderMenu 
{
  float:left;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}
ul#HeaderMenu a
{
  float:left;
  width:auto;
  text-decoration:none;
  color:white;
  background-color:purple;
  padding:0.2em 0.6em;
  border-right:1px solid white;
}
ul#HeaderMenu a:hover {background-color:blue}
ul#HeaderMenu li {display:inline}

Rendered by WebCode

Javascript selection

The id selector can be used to select a specific element with the querySelector function of the dom document

Demo:

The javascript

let id = "box"
let selector = "#"+id;
let element = document.querySelector(selector);
console.log(`The innerText of the element with the id ${id} is:  ${element.innerText}`);

The HTML

<div id="box" >Box selected with a selector</div>

The result:

Rendered by WebCode