title: Css selector > + #id + hover syntax confusion
body: <p>I have a few buttons and one of them has a different colour so the hover colour I chose for the other doesn't quite work with that one. Therefore I wanted to create an #id for it. Here are the CSS and HTML:</p>
  <p>/!\ the id i wanted to make is the very last css in the code provided here. I saw confusion in the replies, .boutonsim is just the class for all of the buttons while #boutonachat is the id thing.</p>
  <p>However the id thing has 0 effect. idk how to do the syntax for that.</p>
  <pre><code>.boutonsim { /*construction d'un bouton avec faux fond*/
      display: block;
      height: 45px;
      width: 150px;
      position: absolute;
      top: 1.9em;
      z-index: 1;
      font-size: 16px;
  }
  
  .top-container &gt; button {
      display: block;
      width: 150px;
      height: 45px;
      background-repeat: no-repeat;
      background-color: rgba(255, 255, 255, 0);
      color: white;
      border: none;
      font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
      font-size: 16px;
      text-align: center;
      z-index: 2;
      position: absolute;
      top: 1.9em;
      padding: 0;
  }
  
  
  .top-container &gt; button:hover {
      color: brown;
  }
  
  .top-container &gt; button:hover {
      color: rosybrown;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>        &lt;div class=&quot;top-container&quot;&gt;
          &lt;img id=&quot;img2&quot; src=&quot;images/haut.png&quot; /&gt;
          &lt;img id=&quot;title&quot; src=&quot;images/nom.png&quot; /&gt;
          &lt;img id=&quot;logo&quot; src=&quot;images/LOGO.png&quot; /&gt;
  
          &lt;div class=&quot;boutonsim&quot; style=&quot;right: 80px;&quot; name=&quot;boutonachat&quot;&gt; &lt;!--image--&gt;
              &lt;img src=&quot;images/clipart/boutonORIGINALachat.png&quot; /&gt; &lt;!--vrai bouton--&gt;
          &lt;/div&gt;
          &lt;button id=&quot;boutonachat&quot; style=&quot;right: 80px;&quot;&gt;Billets&lt;/button&gt;
  
          &lt;div class=&quot;boutonsim&quot; style=&quot;right: 280px;&quot; name=&quot;boutonculture&quot;&gt; &lt;!--image--&gt;
              &lt;img src=&quot;images/clipart/boutonORIGINAL.png&quot; /&gt; &lt;!--vrai bouton--&gt;
          &lt;/div&gt;
          &lt;button style=&quot;right: 280px;&quot;&gt;Culture&lt;/button&gt;
  
          &lt;div class=&quot;boutonsim&quot; style=&quot;right: 480px;&quot; name=&quot;boutonpaysages&quot;&gt; &lt;!--image--&gt;
              &lt;img src=&quot;images/clipart/boutonORIGINAL.png&quot; /&gt; &lt;!--vrai bouton--&gt;
          &lt;/div&gt;
          &lt;button style=&quot;right: 480px;&quot;&gt;Paysages&lt;/button&gt;
  
          &lt;div class=&quot;boutonsim&quot; style=&quot;right: 680px;&quot; name=&quot;boutonaccueil&quot;&gt; &lt;!--image--&gt;
              &lt;img src=&quot;images/clipart/boutonORIGINAL.png&quot; /&gt; &lt;!--vrai bouton--&gt;
          &lt;/div&gt;
          &lt;button style=&quot;right: 680px;&quot;&gt;Accueil&lt;/button&gt;
  
      &lt;/div&gt;
  </code></pre>