Than differ id and class

One of the most often questions during acquaintance to new standards - in what a difference between attributes of HTML-elements "id" and "class". In fact effect, like, identical.

Identical effect at them only in the most simple cases of use in CSS. Actually differences full.

Essence

id - unique own name of an element on page, that is on page should not be several elements with one id. For example the block with a cap of a site can give id = "title".

class - a free attribute, which is given usually to several elements to distinguish them from others. For example, to pictures which simply accompany with the text, it is possible to give class = "decor", and to pictures which are important for understanding of the text - class = "content".

Consequences{Investigations}

Other differences which are visible both in HTML, and in CSS follow from this essence directly or indirectly, and in scripts.

Anchor links

If it is necessary to put the link to any element in page it is enough to him to give id (<h2 id = "about">... </h2>) and to refer to him{it} an anchor (http: // site/path / * about). It, by the way, a preferable way instead of old <a name = "...">.

Plural attributes

The element can set some classes through blanks: <img class = " important centered printable ">. And they can be used and separately:

/* All important elements */

.important {color:red;}

… and in a combination:

/* Elements with important and centered simultaneously */

.important.centered {border:solid black 1px;}

Pay attention, that between classes in a CSS-rule there is no blank.

Different weight in CSS

Each rule in CSS has "weight" on which the order of their applications is defined{determined}. At id this weight is more. Therefore if at an element it is set both id, and class:

<h2 id = "about" class = "important">... </h2>

… that from two rules

*about {color:green;}

.important {color:red;}

… will win the first, color of heading will be green. (Weights of rules is a separate song, about her there will be clause{article} in due time.)

Search in a script

The element with "id" can be found easily in a script with the help of function document.getElementById (). For classes of such function no.