Multiple IDs

Behavior of multiple IDs.

HTML

<h1>Multiple IDs</h1>

<div id="one two">
    <pre>&lt;div id="one two"&gt;&lt;/div&gt;</pre>
    <p>Red border, green background: Both IDs applied.</p>
    <p>Green background: Second ID ignored.</p>
    <p>Red border: First ID ignored.</p>
    <p>Else: Both IDs ignored.</p>
</div>
<div id="one" id="two">
    <pre>&lt;div id="one" id="two"&gt;&lt;/div&gt;</pre>
    <p>Red border, green background: Both IDs applied.</p>
    <p>Green background: Second ID ignored.</p>
    <p>Red border: First ID ignored.</p>
    <p>Else: Both IDs ignored.</p>
</div>

<div id="three">
    <pre>&lt;div id="three"&gt;&lt;/div&gt;</pre>
    <p>CSS applied to multiple elements.</p>
</div>

<div id="three">
    <pre>&lt;div id="three"&gt;&lt;/div&gt;</pre>
    <p>CSS applied to multiple elements.</p>
</div>

CSS

#one{ background: #cfc; } // light green

#two{ border: 1px dotted red; }

#three{ background: #ccf; } // light blue



h1, div { padding: 200px; }
h1{ font-size: 2em; }
div{ margin: 2px; }
span { font-style: monospaced; }

JavaScript

$("#three").append("<p>Found by jQuery</p>");