Besides using !important that most answers are advising you to use, this is a matter of CSS specificity
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.In case of specificity equality, the latest declaration found in the CSS is applied to the element.
Some rules of thumb
- Never use !important on site-wide css.
- Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
- Never use !important when you’re writing a plugin/mashup.
- Always look for a way to use specificity before even considering !important
can be represented by 4 columns of priority:
inline = 1|0|0|0
id = 0|1|0|0
class = 0|0|1|0
element = 0|0|0|1
Left to right, the highest number takes priority.
Here is a snippet with a Full example of a CSS specificity
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY: 0/1/0/0 */
#id {
background-color: green
}
/* SPECIFICITY: 0/0/1/0 */
.class {
background-color: yellow
}
/* SPECIFICITY: 0/0/0/1 */
section {
background-color: blue
}
/* ------------ override inline styles ----------- */
/*to override inline styles we now use !important */
/* SPECIFICITY 0/0/1/0 */
.inline {
background-color: purple !IMPORTANT /*going to be purple - final result */
}<article>
<div id="id">
<div class="class">
<section>
<div class="inline" style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
</div>
</section>
</div>
</div>
</article>Now here is the Full snippet step by step
ID: GREEN
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>CLASS: YELLOW
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow
}<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>ELEMENT: BLUE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue
}<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>INLINE STYLE: RED
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>OVERRIDDEN INLINE STYLE: PURPLE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>You can calculate the specificity of your element(s) here
Note:
A must read on this subject