title: CSS :hover effect not working when I set an ID to the paragraph
body: <p>I have the following css3 transition with ease effect:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="button"&gt;     
      &lt;a href="#" onMouseOver="clicksound.playclip()"&gt;&lt;/a&gt;
      &lt;p id="myId" class="top"&gt;&lt;/p&gt;            
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> * {
       padding: 0;
       margin: 0;
   }
   .button {
       width: 180px;
       margin-top: 45px;
   }
   .button a {
       display: block;
       height: 40px;
       width: 180px;
       /*TYPE*/
       color: black;
       font: 17px/50px Helvetica, Verdana, sans-serif;
       text-decoration: none;
       text-align: center;
       text-transform: uppercase;
   }
   .button a {
       background:url(http://imageshack.com/a/img819/761/dqj.gif);
       margin: -50 0 0 0;
       z-index: -1;
   }
    p#myId {
       background: url(http://imageshack.com/a/img854/1921/9ft3.png);
       display: block;
       height: 40px;
       width: 167px;
       margin: -40px 0 0 5px;
       z-index:-1;
       /*TYPE*/
       text-align: center;
       font: 12px/45px Helvetica, Verdana, sans-serif;
       color: #fff;
       /*POSITION*/
       position: absolute;
       /*TRANSITION*/
       -webkit-transition: margin 0.1s ease;
       -moz-transition: margin 0.1s ease;
       -o-transition: margin 0.1s ease;
       -ms-transition: margin 0.1s ease;
       transition: margin 0.1s ease;
   }
   .button:hover .top {
       margin: -67px 0 0 5px;
       line-height: 35px;
   }
   /*ACTIVE*/
   .button:active .top {
       margin: -70px 0 0 5px;
   }
  </code></pre>
  
  <p>If I change the <code>p#myId</code> selector to <code>p</code> in CSS, it works (the button goes up on hover), otherwise it won't.</p>
  
  <p><kbd><a href="http://jsfiddle.net/cjTN7/10/" rel="noreferrer">Running demo on jsFiddle</a></kbd></p>