The priority of CSS selectors

Question

Here is my HTML:

<input type='submit' class='clsname'>

This CSS makes a blue border for that input: Demo

input{
  border: 1px solid red;
}
.clsname{
  border: 1px solid blue;
}

But this makes a red border for that input: Demo

input[type='submit']{
  border: 1px solid red;
}
.clsname{
  border: 1px solid blue;
}

I don't know why exactly, But I know it is related to the priority of selectors. I think input[type='submit'] has a bigger priority than classname, but input doesn't have a bigger priority than classname.

Now I have a selector like this: input[type='submit'] and I need to give a bigger priority to class name. How can I do that? I mean something like this:

input[type='submit'] { }
.clsname { /* bigger priority here */ }

Note: I can do that by !important, But I want to know is there any approach else? Because using !important is not recommended.

Use input[type='submit'].clsname, .clsname. Fiddle

Aki
– Aki

2016-04-22 18:56:32 +00:00
Commented Apr 22, 2016 at 18:56 — Aki
– Aki, Commented Apr 22, 2016 at 18:56

Aki · Accepted Answer · 2016-04-22 19:01:53Z

2

It's specificity. Read more here on W3.

Use input[type='submit'].clsname, .clsname selector.

Here's the fiddle.

answered Apr 22, 2016 at 19:01

Aki

2,9481 gold badge17 silver badges24 bronze badges

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

1 Comment

Shafizadeh Over a year ago

Thx ... As I said in the comments, it's exactly what I needed. +1

Freeman Lambda · Accepted Answer · 2016-04-22 18:58:28Z

1

You can overqualify your selector intentionaly to give it higher priority.

input[type="submit"].clsname

answered Apr 22, 2016 at 18:58

Freeman Lambda

3,6751 gold badge27 silver badges35 bronze badges

Collectives™ on Stack Overflow

The priority of CSS selectors

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related