Home/ Questions/Q 1018825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T10:54:59+00:00

below is my markup. when i move the mouse over the hyperlinks they get

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0