Overriding effect of one css by applying one more css

Question

I have 2 css classes , .c1 and .c2 , .c1 applies padding-top of x and .c2 of y, now I want to .c1 to override padding-top value applied by .c2. How can I do it? I cannot alter .c2 so I have to make .c1 override some property values applied by .c2.

Can you show an example? Can you make `c1` get loaded after `c2`? — Pekka, Mar 08 '11 at 10:27

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

You can either move .c1's rule below .c2's:

.c2 { padding-top: 1em; }
.c1 { padding-top: 0.5em; }

or if your element has both classes, apply the style to another selector with both classes .c2.c1:

.c1 { padding-top: 0.5em; }
.c2 { padding-top: 1em; }
.c2.c1 { padding-top: 0.5em; }

If you can't move the rules and can't style multiple classes, the last resort is using !important:

.c1 { padding-top: 0.5em !important; }
.c2 { padding-top: 1em; }

edited May 23 '17 at 12:19

Community

1
1

answered Mar 08 '11 at 10:27

BoltClock

700,868
160
1,392
1,356

sorry , dint get you , can i use important? – jslearner Mar 08 '11 at 10:29
@jslearner: Edited my answer. You can use it but the first two are better alternatives. – BoltClock Mar 08 '11 at 10:31
2

Using `.c1.c1 { padding-top: 0.5em; }` is independent of the order of rules, avoids duplication of the selector as in `.c1, .c1.c2` and also avoids `!important`. :D – Ulrich Schwarz Mar 08 '11 at 11:22

Sotiris · Answer 2 · 2011-03-08T10:36:34.510

1

you can change the specificity of the selector that inludes c1 or if you don't want to change it and it's the same to move it below the c2 or, in the worst case, to add !important for the property.

Specificity demo: http://jsfiddle.net/ADBAf/

div span.c1 {color:blue}
.c2 {color:red}

!important demo: http://jsfiddle.net/ADBAf/1/

.c1 {color:blue !important}
.c2 {color:red}

edited Mar 08 '11 at 10:36

answered Mar 08 '11 at 10:29

Sotiris

38,986
11
53
85

score 0 · Answer 3 · answered Mar 08 '11 at 10:29

0

One way is to use !important

.c2{
  background-color:white;
}
.c1{
  background-color:green !important;
}

The c1 color will be applied

answered Mar 08 '11 at 10:29

SooDesuNe

9,880
10
57
91

1

`!important` won't be necessary if you put `.c1` after `.c2`. – BoltClock Mar 08 '11 at 10:33
You're putting `.c1` before `.c2` in your fiddle. – BoltClock Mar 08 '11 at 10:40
Ah, your right. I shouldn't try to answer questions first thing in the morning :-( http://jsfiddle.net/KFKsr/ – SooDesuNe Mar 08 '11 at 10:44

score 0 · Answer 4 · answered Mar 08 '11 at 10:30

0

If you have no control over the placement of the rules, just do

.c1 { padding-top: 10px !important }

Otherwise it is enough to put the .c1 rule under the .c2 one (unless the latter is more specific).

answered Mar 08 '11 at 10:30

Andrea

20,253
23
114
183

score 0 · Answer 5 · answered Mar 08 '11 at 10:56

0

you have to apply 'Important ' in your CSS to do this

like this:- .c1 { padding-top: 5 !important; } .c2 { padding-top: 7; }

answered Mar 08 '11 at 10:56

ram singh

1
4

Overriding effect of one css by applying one more css

5 Answers5