Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In which order are CSS styles applied?

Tags:

I have the following HTML.

<ul>   <li>     <a>asdas</a>   </li> </ul> 

In my CSS stylesheet I have general settings for the a tag, and several hundered lines later settings for ul li a. Like this:

a:link {  color: red; } ... ul li a {  color:blue; } 

Firebug tells me, that first the color:blue is loaded, and afterwards overriden by color:red
So far I've always thought, that the order of loading css files and the order of style inside a single css file tell the browser how html elements should be formatted. Unfortunately I'm now experiencing it vice versa.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

like image 570
citronas Avatar asked May 13 '10 11:05

citronas


People also ask

What is correct order of precedence in CSS?

Note, that CSS precedence happens at CSS property level. Thus, if two CSS rules target the same HTML element, and the first CSS rule takes precedence over the second, then all CSS properties specified in the first CSS rule takes precedence over the CSS properties declared in the second rule.

What is the correct order of CSS specificity?

Specificity Hierarchy :Every element selector has a position in the Hierarchy. Inline style: Inline style has highest priority. Identifiers(ID): ID have the second highest priority. Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.

Does CSS execute in order?

CSS is "executed" in order. You want the media queries to override the defaults in specific instances so you must declare them after.


1 Answers

Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity. More here in the spec. Because a:link is more specific than ul li a, that style wins regardless of placement.

So tell me, how must I correct my style to achieve the a tag inside the li to be rendered blue and not red?

Make the blue rule at least as specific as the red rule. In this case, you can do that by adding :link to it:

ul li a:link {   color:blue; } 
like image 71
T.J. Crowder Avatar answered Oct 29 '22 01:10

T.J. Crowder