Can i give two class attributes to an HTML element. İf so, which effects my page if i write code to-CodePudding

I wonder which selecter will be affecting my div and why?

HTML

 <div  ></div>

CSS

.div-1 {
    width: 200px;
    height: 300px;
    background-color: gray;
}

.div-2 {
    width: 200px;
    height: 300px;
    background-color: blue;
}

Snippet

.div-1 {
  width: 200px;
  height: 300px;
  background-color: gray;
}

.div-2 {
  width: 200px;
  height: 300px;
  background-color: blue;
}

<div  ></div>

CodePudding user response：

When parsing the start tag, the second class attribute will trigger a duplicate attribute parse error and be ignored.

if there is already an attribute on the token with the exact same name, then this is a duplicate-attribute parse error and the new attribute must be removed from the token.

Consequently only the first class attribute will be added so the only class that will apply to the div is div-1 and thus only the first ruleset will apply.

Note that you can apply multiple classes to a single element since the class attribute accepts a space-separated list of classes. In that case, the normal rules for the cascade will apply (with the properties of the second rule-set overriding the duplicate properties of the first because the selectors have equal specificity and so they are applied in order of appearance).