StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>The short answer is:</h2> <p>Use <strong>!important</strong></p> <pre><code>/* In a stylesheet */ p { color:red !important } /* In a inline-style */ <p style="color:red !important;">This text will stay red</p> </code></pre> <p>In normal cases, applying a style "later" in the page and with a higher selector priority overwrites a previously set property. </p> <p>However, with javascript frameworks like twitter bootstrap, css styles can be applied directly to html elements after the page is loaded, thus replacing anything you might do. Depending on the code used, some can even clear all the inline-styles previously defined. To overcome this, you can put this JQuery code just before the element you want to change.</p> <pre><code>$('#elem').attr('style', $('#elem').attr('style') + '; ' + 'color: red !important'); </code></pre> <h2>Now, for the long answer...</h2> <p>Using the following HTML</p> <pre><code><p class="MyStyle" id="MyId"> MyText </p> </code></pre> <p>CSS styles are applied <strong>in order</strong> according to these 3 rules (rule 2 winning over rule 1):</p> <p><strong>1. Rules are applied in the order they are read by the browser (top to bottom):</strong></p> <pre><code><style type="text/css"> p { color:blue; } p { color:red; } </style> /* Red wins */ </code></pre> <p>Inline-styles are the last to be applied</p> <pre><code><p style="color:yellow"> MyText </p> /* Yellow wins */ </code></pre> <p><strong>2. The most specific rule selector wins</strong> (The tricky part)</p> <p>Specificity is calculated using the number or selectors for a rule in this priority: (#id,.class,element) </p> <pre><code>/* One element =1 */ p { color:blue } /* (0,0,1) =1 */ /* One class =10 */ .MyStyle { color: yellow } /* (0,1,0) =10 */ /* One Id =100 */ #MyId { color: silver } /* (1,0,0) =100 */ /* 2 elements =2 */ p a { color:red } /* (0,0,2) =2 */ /* One element and one class =11 */ p.MyStyle { color: green } /* (0,1,1) =11 */ /* 2 elements and 2 classes =22 */ div.MyOtherStyle p.MyStyle { color: black } /* (0,2,2) =22 */ /* One Id, one class and one element =111 */ p#MyId.MyStyle { color:gold } /* (1,1,1) =111 */ /* 11 elements =11 See lower to know why this does not win over 1 class (10) */ ul li ul li ul li ul li ul li ul li { color:red } /* (0,0,11)=11 */ /* Gold wins */ </code></pre> <p>Id always wins over class and class always wins over element, no matter their count. Here are a few examples:</p> <p><strong>Q:/</strong> If I have an 11 elements selector, does it win over 1 class (=10)? </p> <p><strong>R:/</strong> Even if 11 is greater than 10, <strong>the priority is always id,class,element</strong>. In this case, you need to calculate all the numbers across your styles using one more digit per position in (0,0,0). Ex: (1,1,1)=111 would become (100,10,1)=100101. Therefore, 11 elements would be (0,0,11)=11 and 1 class would be (0,10,0)=100.</p> <p>This is equivalent to doing this math on (a,b,c): (a*100, b*10, c). If you have more than 101 elements in your selector, find a new job or use (a*1000, b*100, c).</p> <p><strong>3. !important rules them all</strong></p> <p>You should try 1 and 2 before using !important</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload