Question 194458 in Html Question posted in
Some basic documentation can be found here.

Trying to change menu button colors to work on html

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>
Tags:

2

Answers


  1. 0

    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 {...}
...
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search