ansaurus

Question

Answer 1

+1 A:

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.

Dustin Laine 2010-08-25 21:40:36

i do not understand what you are saying... please clarify

akonsu 2010-08-25 21:42:52

I updated, so let me know.

Dustin Laine 2010-08-25 22:30:17

Answer 2

+3 A:

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.

Nick Craver 2010-08-25 21:41:19

Changed other to order. I corrected Nick Craver. Woohoo!! :)

Marko 2010-08-25 21:44:15

@Marko - woops, thanks :)

Nick Craver 2010-08-25 21:45:28

thanks, i guessed their equality was the issue. i am trying to make the hyperlinks go black if the user hovers over the <li> and in addition get underlined and go red if the user hovers over <a>. a rule such as .menu li:hover a:hover seems to work but it is not working on IE6. well, i am using "whatever:hover" script (http://www.xs4all.nl/~peterned/csshover.html) for IE6 but the script does not support constructs like that...

akonsu 2010-08-25 21:46:55

@akonsu - IE6 doesn't like the `:hover` pseudo selector on anything but an anchor, so that's why you're seeing odd behavior there :)

Nick Craver 2010-08-25 21:53:53

Answer 3

+1 A:

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!

Marko 2010-08-25 21:46:18

Answer 4

+1 A:

CSS rules are applied in order if they have the same specificity. In your case, they do, so order matters.

With the order you have in your question, the rules apply text-decoration: none. The second and third rules causes hovering the mouse over the link to modify those two styles in order because the a tag is inside the li tag. First, the color turns black; then, the color turns red and the underline appears.

Reverse the order of the last two rules like so:

    .menu a
    {
        text-decoration: none;
    }
    .menu li a:hover
    {
        color: red;
        text-decoration: underline;
    }
    .menu li:hover a
    {
        color: black;
    }

Now, the text-decoration: none gets applied as before. Then, upon mouse-over, the first rule changes the color to red and adds an underline, followed by the color changing to black.

2010-08-25 21:49:25

Answer 5

+1 A:

Yes, it does. The last point of the cascading order reads:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Gumbo 2010-08-25 21:50:21

ansaurus

tags:

views:

answers:

does the order of styles matter?

related questions