applying different style to specific input button

Question

check out this JSFiddle
I want to apply different style to second button. I guess there is just a different sytax. Help.

<input type="button">
<input type="button" class="button2">

I dont want to use id, beacause it's to be used for some other purpose.

Answer 1

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

You can specificity the css selector using 'has' class add apply the rule to input button elements with class .button2:

input[type="button"] {
  width: 500px;
  background: red;
}
[type='button'].button2 {
  width: 100px;
  background: black;
}

<input type="button">

<input type="button" class="button2">

Also take a look Specificity.

Answer 2

<input type="button">

<input type="button" class="button2">


input[type="button"]{
    width: 500px;
    background: red;
}
input[type="button"].button2{
     width: 100px;
     background: black;

 }

Fiddle: http://jsfiddle.net/0dyk2n3b/1/