Why is the red background color not being applied in the menu?

Asked

Viewed 54 times

0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main-menu ul {
            list-style: none;
            width: 200px;
        }

        #main-menu ul li {
            margin: 10px;
        }

        #main-menu ul li a {
            display: block;
            padding: 10px;
            background: #000000;
            color: #ffffff;
            text-decoration: none;
        }

        #selected-menu {
            background: red;
        }
    </style>
</head>
<body>
    <nav id="main-menu">
        <ul>
            <li><a id="selected-menu" href="">Perfil</a></li>
            <li><a href="">Posts</a></li>
            <li><a href="">Referências</a></li>
            <li><a href="">Tutorials</a></li>
            <li><a href="">Configurações</a></li>
        </ul>
    </nav>
</body>
</html>

In the code above you have a menu in which you have the black background color in the widget <a> what happens is that I put a id="selected-menu" in the first element <a> and then added the following code CSS:

    #selected-menu {
        background: red;
    }

And he doesn’t change the color, he only changes if I use !important in the red background color on the contrary nothing happens because this is happening?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main-menu ul {
            list-style: none;
            width: 200px;
        }

        #main-menu ul li {
            margin: 10px;
        }

        #main-menu ul li a {
            display: block;
            padding: 10px;
            background: #000000;
            color: #ffffff;
            text-decoration: none;
        }

        #selected-menu {
            background: red !important;
        }
    </style>
</head>
<body>
    <nav id="main-menu">
        <ul>
            <li><a id="selected-menu" href="">Perfil</a></li>
            <li><a href="">Posts</a></li>
            <li><a href="">Referências</a></li>
            <li><a href="">Tutorials</a></li>
            <li><a href="">Configurações</a></li>
        </ul>
    </nav>
</body>
</html>

html css

  • You have already tested in other versions/browsers?

2 answers

0


This is because the selector #selected-menu has less priority than the selector #main-menu ul li a. The !important will cause the property given in the selector to override any other rule.

In this answer is explained how to calculate CSS selector priorities. E on this website you can calculate online, which shows that the selector #selected-menu has priority 100, as long as the #main-menu ul li a has 103:

inserir a descrição da imagem aqui

Therefore, the value will prevail 103 (the largest) where you apply the black background to the list links.

  • Thanks a lot, sam! : )

-3

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.