0

 body {
      background-color:olive;
    }
    #container{
      background-color:;
      display:flex;
    }

    #container > a {
      
      background-color:chocolate;
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    

    #item-2 {

    }
    #item-4{
      margin-left:auto;
    }

    #bonus {

      background-color:red;
    }
<body>
<nav>
  <div id="container">
    <a id="item-1 bonus" href="#">Information</a>
    <a id="item-2 bonus" href="#">Contacts</a>
    <a id="item-3 bonus" href="#">Media</a>
    <a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>

Hello, could anyone tlel me why doesnt "bonus" class apply background-color:red ? Is there a rule where you can't put two id's or something? Some clarification would be really useful. Thanks.

iloveweb
  • 105
  • 1
  • 6

3 Answers3

1

What are valid values for the id attribute in HTML?

Read this regarding HTML attribute id.

You can instead use a class attribute for having multiple class names on a single element. id can't be used like that.

samuellawrentz
  • 1,107
  • 7
  • 19
1

That is not a valid id. You can use class instead of id. Also, update your style for bonus to following for getting the right specificity. For details refer to CSS Specificity

body {
      background-color:olive;
    }
    #container{
      background-color:;
      display:flex;
    }

    #container > a {
      
      background-color:chocolate;
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    

    #item-2 {

    }
    #item-4{
      margin-left:auto;
    }

    #container > a.bonus {

      background-color:red;
    }
<body>
<nav>
  <div id="container">
    <a id="item-1" class="bonus" href="#">Information</a>
    <a id="item-2" class="bonus" href="#">Contacts</a>
    <a id="item-3" class="bonus" href="#">Media</a>
    <a id="item-4" href="#">Logout</a>
</div>
</nav>
</body>
Nikhil Aggarwal
  • 26,884
  • 3
  • 37
  • 53
0

body {
      background-color:olive;
    }
    .container{
      background-color:;
      display:flex;
    }

    .container > a {
      margin:5px;
      padding:7px;
      border-radius:10px;
    }
    
    .link {
      background-color: chocolate;
    }
    

    .item-2 {

    }
    .item-4{
      margin-left:auto;
    }

    .bonus {

      background-color:red;
    }
<body>
<nav>
  <div class="container">
    <a class="item-1 bonus link" href="#">Information</a>
    <a class="item-2 bonus link" href="#">Contacts</a>
    <a class="item-3 bonus link" href="#">Media</a>
    <a class="item-4 bonus link" href="#">Logout</a>
</div>
</nav>
</body>

I advise you to always use class instead of id (read on this topic: https://dev.to/claireparker/reasons-not-to-use-ids-in-css-4ni4).

Note that I removed the background-color: chocolate property, because the .container > a selector is stronger than the bonus.

dsmaslov
  • 41
  • 6