Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>ID's must be unique within a document. CLASS can be applied (and combined) to mutiple elements on the same page.</p> <p>ID's cannot be combined (mutiple id's). This works:</p> <pre><code>&lt;div class="beautiful blonde stupid"&gt; blah blah blah &lt;/div&gt; </code></pre> <p>but this does not work:</p> <pre><code>&lt;div id="Paris Hilton"&gt; blah blah blah &lt;/div&gt; </code></pre> <p>Dynamic HTML typically uses id's to control elements. Elements with id's have the fastest 'lookup', as cletus mentions, when javascript is used in some way to have the page interact with the user. </p> <p>Think of class and id in these contexts and the reasons for each become clear.</p> <p>Imagine a page with a few functional divs. Every div would have the same class to display a common style (i.e. width). And every div needs a unique id to style it when it has been selected. In this situation, you might have something like this:</p> <pre><code>&lt;div class="demo" id="div1" onlick="action()"&gt; blah blah blah &lt;/div&gt; </code></pre> <p>and a javascript routine somewhere like:</p> <pre><code>function action() { document.getElementById( 'div1' ).style.backgroundColor = 'red' } </code></pre> <p>Note: This is dumb code but it is to get the point across</p> <p>An element can be unique on each web page but be common to a web site. Thus it makes sense to use class in this context even if it is unique on the page.</p> <p>So, a general <strong>rule of thumb</strong> - <em>if it's unique, use id, if it's not use class</em>. It's really easy to change id to class if needed. It's not as easy to switch back.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload