How to create css classes which are "stronger" that elements?

Question

I have one question concerning css classes and elements. Say I have something like form input[type=submit] {...}

Now on one page I want to add a submit button but with a different look. So I created a class for example form .button and added class="button" to a submit button. The problem is now that the settings of form input[type=submit] {...} seem to be stronger so that the button with the class looks the same. How could I solve this problem?

score 3 · Answer 1 · answered Jun 30 '11 at 14:25

You should use:

form input[type=submit] {
    border: 3px solid red
}
form input.button {
    border: 3px solid blue
}

See: http://jsfiddle.net/5pbbD/

This problem is all about CSS Specificity. See this article and the CSS spec.

form input[type=submit] has greater specificity than form .button, so that's why you're having this problemn.
I've changed the second selector (form .button) into form input.button, which is just specific enough. The two selectors in my answer actually have equal specificity, so it comes down to the order they're defined.

score 2 · Answer 2 · answered Jun 30 '11 at 14:24

2

This is all about CSS selector specificity. Easy solution for your problem:

form input[type=submit].button {
    /* ... */
}

Please don't just use !important.

answered Jun 30 '11 at 14:24

Matt Ball

354,903
100
647
710

score 1 · Answer 3 · answered Jun 30 '11 at 14:25

1

If you mark the attributes in the class with !important, i.e.

.button
{
  width: 100px !important;
}

That could do what you're wanting.

answered Jun 30 '11 at 14:25

DoctorMick

6,703
28
26

score 0 · Accepted Answer · answered Jun 30 '11 at 14:23

This is about specificity. form input[type=submit] is more specific, so will override a class. If you use an id on your element it will be more specific still, and so will override your general rule.

form #submitButton {
    /* strongly specific rules */
}

score 0 · Answer 5 · answered Jun 30 '11 at 14:25

0

Why not use,

form input[type=submit].button,
form .button {...}

answered Jun 30 '11 at 14:25

Andrew

13,757
13
66
84

score 0 · Answer 6 · edited May 23 '17 at 12:04

0

Assign a class to the button that you want different and change the CSS concerning the other buttons to be applied to "everything but buttons with this class". You can find out how to do that here.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 30 '11 at 14:28

SteeveDroz

6,006
6
33
65

score -1 · Answer 7 · answered Jun 30 '11 at 14:24

-1

use !important css directive

answered Jun 30 '11 at 14:24

Alex Reitbort

13,504
1
40
61

_[Noooooooooooooooooooooooooooo](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css)_ – Matt Ball Jun 30 '11 at 14:26
David Thomas's answer to this question explains very well why !important should be used as little as possible: http://stackoverflow.com/questions/6524175/why-doesnt-new-styling-appear-in-browser-when-class-is-added-to-element/6524213#6524213 – shanethehat Jun 30 '11 at 14:26

How to create css classes which are "stronger" that elements?

7 Answers7