Two classes or more in the same element in HTML

Question

I would like to know if it is possible to assign two or more classes in the HTML element. For example, I have a div, I could assign two class to her?

<div class="primeira_classe" class="segunda_classe"></div>

Or it would be against HTML rules?

Answer 1

You can’t have two attributes class in tag, but you can have as many classes as you want, and that’s very common:

<div class="primeira_classe segunda_classe"></div>

Answer 2

According to the specification of WHATWG, an attribute cannot appear more than once in the same element:

There must Never be two or more Attributes on the same start tag Whose Names are an ASCII case-insensitive match for each other.

That is, if you have something like <div class="abc" class="def">, this is invalid because it has more than one attribute with the same name (in this case, two attributes class).

^{Remembering that the comparison, as the text above, is case insensitive, so even if you have <div cLASs="primeira_classe" class="segunda_classe">, is still invalid because cLASs and class are considered the same attribute - see link already indicated: "All attribute Names on HTML Elements in HTML Documents get ASCII-lowercased Automatically").}

In practice, the browsers tend to ignore the second occurrence thereafter (browsers are usually very permissive with invalid HTML). That is, using your example, only the first class would be applied:

.primeira_classe {
    background-color: red;
}

.segunda_classe {
    color: yellow;
}

<div class="primeira_classe" class="segunda_classe">
Fundo vermelho, mas letra não fica amarela (a segunda classe não é aplicada)
</div>

---

In the specific case of the attribute class, the MDN says the following:

The class global attribute is a space-separated list of the case-sensitive classes of the element

Highlight for the bold section above: the value of the attribute class is a list the names of the classes of an element, separated by spaces.

Therefore, for the element to have the two classes, it is enough to separate them by space:

.primeira_classe {
    background-color: red;
}

.segunda_classe {
    color: yellow;
}

<div class="primeira_classe segunda_classe">
Fundo vermelho, letra amarela
</div>

---

Remembering that this restriction of an attribute can only appear once in an element holds for any attribute (not only class), in any element (in any tag).

It is also worth remembering that each attribute has its own rules as to whether or not it has multiple values. In the case of class, just separate them by space, but in the case of other attributes, see the specification of each one to know if/how it is possible to do it.

Answer 3

Completely normal, mainly used when having a bootstrap class for example.

<div class="container-fluid primeira_classe segunda_classe"></div>