Overriding effect of one css by applying one more css

I have 2 css classes , .c1 and .c2 , .c1 applies padding-top of x and .c2 of y, now I want to .c1 t开发者_StackOverflow社区o 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.

---

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; }

---

Take a look at this article, about css priority. Perhaps it will help you http://hungred.com/useful-information/css-priority-order-tips-tricks/

---

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}

---

One way is to use !important

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

The c1 color will be applied

---

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).

---

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

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