title: CSS id selectors just won't work
body: <p>In my react.JS project, I have a div. This div has a button, and a list. This list is marked clearly with id="results".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>return &lt;div&gt;
      &lt;Button label="Combine Cards" disabled={!this.props.combineReady} onClick={this.handleClick} accent primary raised /&gt;
        &lt;br /&gt;
        &lt;ul &gt; 
           { JSON.parse(this.state.data).resultCards.map(function(card){
               return &lt;li id="results"&gt;{card.deviation} &lt;img src={'https://image.deckbrew.com/mtg/multiverseid/123456.jpg'}/&gt;&lt;/li&gt;;                     
           }) }
       &lt;/ul&gt;
   &lt;/div&gt;;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The styles.css file I have the displeasure of wrestling with looks something like this;</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The list container. */
  ul{
      list-style: none;
      display: inline-block;
      width: 263px;
      text-align: left;
  }
  
  /* The individual list items. */
  ul li{
      display: block;
      padding: 15px 20px;
      background-color: #F8F8F8;
      color: #7B8585;
      margin-bottom: 3px;
      position: relative;
      
      transition: 0.3s;
  }
  
  /* The card images within the list items. */
  ul li img{
      /*height: 200px;*/
      transform: scale(0.6, 0.6);
      -ms-transform: scale(0.6, 0.6);
      -webkit-transform: scale(0.6, 0.6);
      align: top;
      padding: 3px;
      transition: 0.3s;
  }
  
  /* Those images when hovered over. */
  ul li img:hover{
      /*height: 311px*/
      transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
  }
  
  ul li a{
      position: absolute;
      left: 160px;
      font-size: 12px;
      line-height: 16px;
      color: #969d9d;
  }
  
  /* The individual list items when hovered over. */
  ul li:hover{
      background-color:#d8f2f1;
  }
  
  li#results{
      display: inline !important; 
      background-color: #7B8585 !important;
      color: #F8F8F8 !important;
      height: 200px !important;
      overflow: visible !important;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>At the bottom is a style called li#results. I tried ul#results li, #results, ul li#results and nothing will make the damned result list change in style. I even told it it was important. I tried marking the list container as <code>&lt;ul 'id=results' /&gt;</code> and going off that. That too failed. What in the name of obscure CSS am I doing wrong?</p>
  
  <p>(I have two other lists that aren't results, so I can't just change the list styling, either.)</p>
  
  <p>Here's the resulting html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-reactid=".0.0.0.1.0"&gt;
    &lt;button class="style__raised___3-PWA style__primary___zmQdT" data-react-toolbox="button" data-reactid=".0.0.0.1.0.0"&gt;
      &lt;span data-reactid=".0.0.0.1.0.0.1"&gt;Combine Cards&lt;/span&gt;
      &lt;span data-react-toolbox="ripple" class="style__wrapper___VXsUA" data-reactid=".0.0.0.1.0.0.2:1"&gt;
        &lt;span role="ripple" class="style__normal___K1YSF" style="transform: translate3d(-207.688px, -199.32px, 0px) scale(1); width: 398.25px; height: 398.25px;" data-reactid=".0.0.0.1.0.0.2:1.0"&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/button&gt;
    &lt;br data-reactid=".0.0.0.1.0.1"&gt;
    &lt;ul data-reactid=".0.0.0.1.0.2" id="results"&gt;
      &lt;li data-reactid=".0.0.0.1.0.2.0"&gt;
        &lt;span data-reactid=".0.0.0.1.0.2.0.0"&gt;0.8743035007251114&lt;/span&gt;
        &lt;span data-reactid=".0.0.0.1.0.2.0.1"&gt; &lt;/span&gt;
        &lt;img src="https://image.deckbrew.com/mtg/multiverseid/126204.jpg" data-reactid=".0.0.0.1.0.2.0.2"&gt;
      &lt;/li&gt;
      &lt;li data-reactid=".0.0.0.1.0.2.1"&gt;
        &lt;span data-reactid=".0.0.0.1.0.2.1.0"&gt;0.8663643850889716&lt;/span&gt;
        &lt;span data-reactid=".0.0.0.1.0.2.1.1"&gt;&lt;/span&gt;
        &lt;img src="https://image.deckbrew.com/mtg/multiverseid/373708.jpg" data-reactid=".0.0.0.1.0.2.1.2"&gt;
        ...8 more lines.
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>That's with <code>&lt;ul id="results"/&gt;</code>. With <code>&lt;li id="results"/&gt;</code> the id tag just moves to all the line elements. With <code>&lt;ul class="results"/&gt;</code> I see nothing, no id or class at all.</p>