CODEWITHSUNDEEP
htmlcss
Ivailo Stanimirov Kolev
Ivailo Stanimirov Kolev

Reputation: 9

How to select tag in CSS with 2 classes

I want to make bigger selector specificity 

//HTML        
<input type="button" class="button filled" class="button icon" value="Learn More">

//CSS
.button.filled button.icon
{

}

Upvotes: 0

Views: 70

Answers (1)

Dai
Dai

Reputation: 155628

This is not valid HTML:

<input type="button" class="button filled" class="button icon" value="Learn More">

You can't have multiple class="" attributes in an element, that's illegal in HTML:

Can an HTML element have the same attribute twice?

When the user agent leaves the attribute name state (and before emitting the tag token, if appropriate), the complete attribute's name must be compared to the other attributes on the same token; if there is already an attribute on the token with the exact same name, then this is a parse error and the new attribute must be dropped, along with the value that gets associated with it (if any).

So browsers will only respect the first class attribute (in your case class="button filled" and ignore the class="button icon" attribute). This may explain why you're not seeing expected behaviour.

In any event, a single class="button filled icon" attribute and selector .button.filled.icon is what you want.

You might also want to use input[type=button].icon instead.

That said, you should avoid using <input type="button"> and <input type="submit"> and use <button type="button"> and <button type="submit"> instead because they let you specify inner content and a separate value="" attribute.

Upvotes: 1

Related Questions