How to change CSS to the same class but another input name

Question

I have 5 buttons on my page and I want to style their CSS so they would be different, I don't know how to do that. Here is the code:

<input input class='field' type='button' name='a4' value='A4'/>
<input input class='field' type='button' name='a3' value='A3'/>
<input input class='field' type='button' name='a2' value='A2'/>
<input input class='field' type='button' name='a1' value='A1'/>
<input input class='field' type='button' name='a'  value='A'/>

should CSS looks like this:

.field {
    width: 120px;
}

.field a1 {
    width: 220px;
}

Sampson · Accepted Answer · 2013-01-24 02:30:24Z

1

You could use the attribute selector:

.field[name='a1'] {
    color: blue;
}

It is very well-supported across all major browsers. A demo is available here.

answered Jan 24, 2013 at 2:30

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change CSS to the same class but another input name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related