Trying to change menu button colors to work on html

Question

Im trying to understand why the code that im using, cant use the styles on my menu buttons. I made styles for individually menu buttons, but it seems they are not beeing used. All my menu buttons assume the default 'ul.menu li a' style and not the individually ones i made. Im very new to this, sorry if it seems to lazy on my part.

    ul.menu {
      list-style-type: none;
      margin: 200;
      padding: 100;
    }

    ul.menu li {
      display: inline-block;
      margin-right: 10px;
    }

    ul.menu li a {
      text-decoration: none;
      padding: 10px 20px;
      background-color: #f2f2f2;
      color: #333;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: Roboto;
    }

    ul.menu li a:hover {
      background-color: #ddd;
    }

    /* Estilos CSS para botões individuais */
    .novo-produto a {
      /* Customizações para o botão Novo Produto */
      background-color: #ffcc00;
      color: #fff;
    }

    .pesquisar-produto a {
      /* Customizações para o botão Pesquisar Produto */
      background-color: #0099cc;
      color: #fff;
    }

    .novo-movimento a {
      /* Customizações para o botão Novo Movimento */
      background-color: #00cc66;
      color: #fff;
    }

    .pesquisar-movimento a {
      /* Customizações para o botão Pesquisar Movimento */
      background-color: #cc6600;
      color: #fff;
    }


  </style>
</head>
<body>
  
  <nav>
    <ul class="menu">
      <li><a class="novo-produto" href="#novo-produto">Novo Produto</a></li>
      <li><a class="pesquisar-produto" href="#pesquisar-produto">Pesquisar Produto</a></li>
      <li><a class="novo-movimento" href="#novo-movimento">Novo Movimento</a></li>
      <li><a class="pesquisar-movimento" href="#pesquisar-movimento">Pesquisar Movimento</a></li>
    </ul>
  </nav>

`.novo-produto a` would select an `a` element, that is a descendent of an element with the class `novo-produto` - but that is not what you have in your HTML structure. You have that class set on the link itself - so the selector would have to be `a.novo-produto`. But even then your declarations from the rule with the selector `ul.menu li a` would still overwrite this - because that selector has higher _specificity_, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — CBroe, Jun 26 '23 at 10:16

score 1 · Answer 1 · answered Jun 26 '23 at 10:36

If you want to select a tags in li tags, It should be like this:

ul li a {...}

or an a tag with special class:

a.novo-produto {...}

".novo-produto a" is incorrect. By this, you are selecting all a tags inside every element which has novo-produto class; which is not available in your html and you do not want it. I think thats what you need:

a.novo-produto {...}
a.pesquisar-produto {...}
...

Md. Rakibul Islam · Accepted Answer · 2023-06-26T10:58:31.530

Try this and it will work perfectly:

ul.menu li a.novo-produto{
    /* Customizações para o botão Novo Produto */
    background-color: #ffcc00;
    color: #fff;
}

The reason why it didn't work because when you wrote ".pesquisar-produto a" that selects a tag which is inside of ".pesquisar-produto" class. Instead, you should write "a.pesquisar-produto" which selects a tag containing ".pesquisar-produto" this class.

Still it would not work because you have to be more specific because you already have CSS rules that are "ul.menu li a" which is more specific. So to overwrite that previous rule you have to write "ul.menu li a.novo-produto" which is more specific. Remember: it is a matter of specificity.

Thank you all, ill have to learn more about those hierachies. Thanks for the help of all — kikalalu, Jun 26 '23 at 11:25

Trying to change menu button colors to work on html

2 Answers2