Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

does the order of styles matter?

below is my markup. when i move the mouse over the hyperlinks they get underlined and turn red. but if i swap the order of the last two rules, the hyperlinks still get underlined, but their color changes to black rather than red. is this by design? if so, how are the rules applied?

thanks! konstantin

 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>     <title>     <style type="text/css" media="all">         .menu a         {             text-decoration: none;         }         .menu li:hover a         {             color: black;         }         .menu li a:hover         {             color: red;             text-decoration: underline;         }     </style> </head> <body>     <div class="menu">         <ul>             <li><a href="#">item0</a></li>             <li><a href="#">item1</a></li>         </ul>     </div> </body> </html> 
like image 625
akonsu Avatar asked Aug 25 '10 21:08

akonsu


People also ask

In what order are CSS styles applied?

Styles are applied in downward order from the top of the diagram in the figure below. Inline styles always override other CSS rules, and application-specific styles override system styles. The standard style sheet usually contains rules for all elements with properties that work for all browsers.

Does order of Classnames matter?

No, it does not.

Does the order of internal and external CSS matter?

Does The Order Of Internal And External Css Matter? However, it matters. multiple css selectors match the exact same element to the exact same extent. It makes no difference if specificity is the same or not, and if it is the same, order does matter.

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.


2 Answers

If the rules are equal in specificity (in this case they are), individual rules get overridden in the order they're defined in the CSS, so in your example red wins because it comes later in the CSS definitions. The same rule applies in other cases as well, for example:

<div class="red green"> 

Which of these wins?

.green { color: green; } .red { color: red; } 

.red wins here, it doesn't matter the order in the class attribute, all that matters is the order the styles are defined in the CSS itself.

like image 96
Nick Craver Avatar answered Sep 22 '22 10:09

Nick Craver


Consider the following HTML.

<div class="red">     Some red text... </div> 

And this CSS..

.red {color: red} .red {color: blue} .red {color: yellow} 

You guessed it, the text will be yellow!

like image 44
Marko Avatar answered Sep 22 '22 10:09

Marko