What is the priority of HTML? "id" or "class"?

Question

I would like to know if HTML is a priority id or class.

For example, if I’m assembling my structure and do the following:

<div class="teste1" id="teste2">TESTE</div>

What will he do? Accept what was declared first? In case the class. If I had done the opposite, it would have been id?

And the !important is relevant in that too?

Answer 1

HTML

In HTML you can always have both and none shall take precedence over the other. It doesn’t matter what they are. The two information are different with different functions, so they coexist and in the example posted they do not conflict. Then both are applied smoothly. The problem occurs when the same name is used for both attributes. Keep this in mind. I’ll show below what happens when there is conflict in CSS.

I remember that id should be unique to every document, but class can be repeated for several elements and an element can have more than one class (not everyone knows this). In other words there can be no more than one element with the same ID, but there can be as many elements as you want with the same class. That is, the ID is a unique identifier of the document object and the class is a marker to say that that object has certain characteristics, possibly in common with other document objects. Making an analogy (half-mouth) with the questions here at Sopt think about the id as the title of the object, and the class as being tags for the object.

You should only use both if you have a reason to use it. In fact, do not put any of these attributes on the object if it is not useful for anything.

CSS

In CSS you will treat each one individually. To set the style for the class in the CSS you will make with the directive . (starting with point). To the id the directive used is the #. All you can do with one can do with the other in terms of styles in CSS.

If you have conflicting definition for both the id will take priority over class (would not be the case with your example). Think, it is more likely that you want to give a more specific style to that object than a more generic style, which is the case of the class that serves several objects. The browser will ignore the class because the identifier has a style definition that probably fits best for the object, after this definition was created with this specificity.

Then the browser will render using the style of id. It is he who will be "accepted" first. It does not matter which order he declared in HTML or CSS.

I repeat, this is only relevant when there are two styles with the same name.

#secao {
    color: #0000FF
}
.secao {
    color: #000000
}

<div id="secao" class="secao">Texto</div>

The text will be blue and not black.

The !important It doesn’t affect anything if there’s really a conflict between the two. This directive is only useful when there is conflict, when there are two different definitions for the same thing. See what happens when we use it in the class that conflicts with the identifier.

#secao {
    color: #0000FF
}
.secao {
    color: #000000 !important
}

<div id="secao" class="secao">Texto</div>

I put in the Github for future reference.

If you need to use !important has great chance the code is misspelled.

Javascript

For Javascript makes difference the use of id, you need to use it to identify the specific element you want to manipulate by code. Even with JS and, of course, jQuery, you can even add a new class to an element but you can’t do the same with id under penalty of having problems to correctly identify with what is stirring.

More relevant information to read on Which CSS selector has priority?

Answer 2

^{The answers already address the subject well, I just complement the existing ones with some notes.}

Summary

The priority of CSS properties in an element is treated as follows:

Properties prevail with the expression !important, after those assigned to the id which have not been subscribed by the expression and finally those assigned in class(s) which have not been subscribed by the id.

To exemplify

In CSS, the rule is that id is a selector that has to be unique on the page, much due to its Javascript applications, reasons which provide the same a precedence over any class present in the same element as well as styles applied directly to the tag of that element.

However, it should be noted that !important exists to make a value of the respective CSS property more important than all others, regardless of id or class:

div{                    /* estilo na tag */
  color:green;
}
.blue{                  /* estilo via class */
  color:blue;
}
#red{                   /* estilo via id */
  color:red;
}
.grey{                  /* estilo expresso como IMPORTANTE */
  color:grey!important;
}

<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

Note that the Mozilla Developer Network considers the use of !important malpractice:

Using !important is a bad practice because it makes debugging difficult as you break the natural cascade in your style sheets.

---

Combinations

We can also complete the answer with the question of selector combinations.

By assigning CSS properties to an element, we can assign them via class, id, tag, but also with a combination.

Here’s an example of a combination with id + class which prevails over the above-mentioned rules, but does not take precedence over the expression !important:

div{                        /* estilo na tag */
    color:green;
}
.blue{                      /* estilo via class */
    color:blue;
}
#red{                       /* estilo via id */
    color:red;
}
.grey{                      /* estilo expresso como IMPORTANTE */
    color:grey!important;
}

#red.bubu {                 /* combinação prevalece sobre as regras de ID */
    color:black;            /* ou class com excepção do que tem a expressão IMPORTANTE */
}

<div>A minha cor via TAG</div>
<div class="blue">A minha cor via CLASS</div>
<div id="red">A minha cor via ID</div>
<div id="red" class="blue">A minha cor via ID + CLASS</div>
<div id="red" class="blue grey">A minha cor via ID + CLASS + !important</div>
<div id="red" class="grey blue">A minha cor via ID + !important +  CLASS</div>

<div id="red" class="blue bubu">
    <small>A minha cor via ID + CLASS deveria dar vermelho, mas foi subscrito pela combinação "#red.bubu" para preto.</small>
</div>

---

Disambiguation about the use of id

I got the idea that the general concept is: "a id should not be used for styles", such concept should be considered incorrect and step to prove:

The use of id for styles in CSS is perfectly valid and has for example the same utility that Javascript gives you, ie achieve a specific element on the page.

If the styles in the id were not valid, because W3C would have wasted time implementing hundreds of rules that bring numerous jobs to the browsers that implement them and to the programmers who have to know them?

And the answer can be found in the documentation:

7.5.2 Identifiers: id and class attributes

The attribute id has several roles in HTML:

As a selector of style sheet.
As a anchor target for hypertext links.
As a way of referring to a particular element of a script.
As the name of an element OBJECT avowed.
For general purpose processing by user agents (for example, for identifying fields when extracting data from HTML pages in a database, translating HTML documents into other formats, etc.).

Answer 3

The selector id has greater precedence than the selector class. So when you have both, the id will always be applied.

.foo { color: blue }
#intro, #intro1 { color: red }

<p class="foo">Hello!</p>
<p id="intro1">Hello!</p>
<p id="intro" class="foo">Hello!</p>

Practical example also in Jsfiddle.

Recommending: Avoid using id to assign styles, as the id should be unique per page.

Answer 4

_{The answers are already very good, but studying about I found an examples that can easily discover the predominance}

W3C has devised a way to calculate the specificity of selectors. To understand simply, we basically distribute different weights the rules applied:

• CSS inline: 1000 points;
• ID: 100 points;
• Classes, pseudo-classe e atributos: 10 points;
• Elementos: 1 point.

In practice, we can make calculations like the following examples:

p.foobar: 1 class + 1 element = 11 points.

div#foobar .foo .bar: 1 ID + 1 element + 3 classes = 131

Set the values you think necessary, but remember that the order of predominance is in the sequence I described above.