does the order of styles matter?

Question

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 underline

Answer 1

Yes the order matters, and in this case it is not really the order which is why you are having the same result regardless of the order.

The .menu li:hover a is applied to the li, which is a parent of the a and the hover is not applied to the a it is applied to the li.

The .menu li a:hover is applied to the a.

Regardless of the order the .menu li a:hover style will be applied to the a.

The better way to handle that is to have the hover pseudo selector applied to only the a element and make set display: block on it, with height and width set to 100%. This will fill the entire LI

Hope this clarifies things.