Home/ Questions/Q 692419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:38:57+00:00

I’ll make this short, I got this webpage : <html xmlns=http://www.w3.org/1999/xhtml> <head> <link rel=Stylesheet

  • 0

I’ll make this short, I got this webpage :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="Stylesheet" type="text/css" href="css/style.css" />
    <link rel="Stylesheet" type="text/css" href="css/nav.css" />
</head>
<body>
    <div id="header">
        <ul id="navList">
            <li><a href="#" id="navActive">foo</a></li>
            <li><a href="#">bar</a></li>
       </ul>
    </div>
</body>
</html>

With this CSS
style.css

body
{
    padding:0;
    margin:0;
    background-color:#000000;
    background-repeat:no-repeat;
    background-image:url('../img/bg.jpg');
}

nav.css

#navList
{
    padding:0;
    margin:0;
    background-image:url('../img/menu.png');
    list-style-type:none;
    padding:12px 150px;
}

#navList li
{
    display:inline;
}

#navList li a
{
    color:#bfbfbf;
    padding:14px 25px;
    text-decoration:none;
}

#navList li a:hover
{
    color:#000000;
    background-color:#bfbfbf;
    text-decoration:none;
}

#navActive
{
    color:#000000;
    background-color:#bfbfbf;
}

It looks like the CSS from the navActive id is never being applied… Could someone tell me why and/or suggest me a way to correct this.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because the selector 

    #navList li a

    is more heavily weighted than

    #navActive

    as it is more specific.

    You can overcome it by adding

    color:#000000 !important;

    or using

    #navList li a#navActive

    as the selector

    • 0