title: css :first-child :nth-child(2) is not working inside aside fieldset form
body: <p>The css property :</p>
  
  <pre><code>aside fieldset:first-child form span
  </code></pre>
  
  <p>is WORKING PERFECTLY and affected as expected but I can't set the colors inside span :</p>
  
  <pre><code>aside fieldset:first-child form span:first-child // unaffected and not working
  
  
  aside fieldset:first-child form span:nth-child(2) // unaffected and not working
  </code></pre>
  
  <p><strong>the jsFiddle:</strong></p>
  
  <p><a href="http://jsfiddle.net/Wpd6L/" rel="nofollow">http://jsfiddle.net/Wpd6L/</a></p>
  
  <p>the css :</p>
  
  <pre><code>aside {
      float: right;
      width: 344px;
  }
  
  aside fieldset {
      border: 0;
  }
  
  aside fieldset:first-child {
      border-color: #c00;
      border-style: dotted;
      border-width: 2px;
      text-align: center;
  }
  
  aside fieldset:first-child * {
      clear: both;
      margin: 10px auto 0;
  }
  
  aside fieldset:first-child video {
      width: 320px;
      height: 240px;
  }
  
  aside fieldset:first-child form h5 {
      font-size: 14px;
  }
  
  aside fieldset:first-child form span {
      cursor: pointer;
      color: #555;
      border-radius: 5px;
      height: 18px;
      display: block;
      line-height: 18px;
      text-align: left;
      font-size: 11px;
      padding: 5px 23px 5px 5px;
      width: 240px;
      z-index: 5;
      border: 1px solid #a6ca8a;
  }
  
  aside fieldset:first-child form span:first-child {
      border:1px solid #a6ca8a;
      background:#e9ffd9;
  }
  
  aside fieldset:first-child form span:nth-child(2) {
      border:1px solid #f5aca6;
      background:#ffecec;
  }
  
  aside fieldset:first-child small {
      display: block;
      font-size: 10px;
      margin-bottom: 10px;
  }
  
  aside fieldset:nth-child(2) {
      padding: 10px;
      width: 320px;
  }
  
  aside fieldset:nth-child(2) ul li {
      height: 250px;
      overflow: hidden;
      width: 300px;
  }
  
  aside fieldset:nth-child(3) {
      padding: 10px;
      width: 320px;
  }
  </code></pre>
  
  <p>the html :</p>
  
  <p></p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;video width=320 height=240 controls preload=none poster="https://puaction.com/vid/mainvideo/pua-video.jpg"&gt;
          &lt;source src="https://puaction.com/vid/mainvideo/mainvideo.mp4" type="video/mp4"&gt;
          &lt;source src="https://puaction.com/vid/mainvideo/mainvideo.webm" type="video/webm"&gt;
          &lt;source src="https://puaction.com/vid/mainvideo/mainvideo.ogv" type="video/ogg"&gt;
      &lt;/video&gt;
      &lt;img src="https://puaction.com/img/triggers/7-most-horrible-mistakes.png" width=297 height=158 title="7 most horrible mistakes" alt="7 most horrible mistakes"&gt;
      &lt;form method=post action="/index.php"&gt;
          &lt;input name=user class=user maxlength=40 placeholder="Full Name" autocomplete=off required &gt;
          &lt;input name=email class=email maxlength=40 placeholder="eMail Address" autocomplete=off required&gt;
          &lt;h5&gt;Please solve the math captcha.&lt;br&gt;What is 4 + 1 =&lt;/h5&gt;
          &lt;input name=captcha class=captcha maxlength=2 placeholder="Math Captcha" autocomplete=off required&gt;
  
  
          &lt;span&gt;&lt;strong&gt;SUCCESS !&lt;/strong&gt; Please check your email.&lt;/span&gt;
          &lt;span&gt;&lt;strong&gt;Opps !&lt;/strong&gt; something went wrong please try again.&lt;/span&gt;
  
  
          &lt;button&gt;Yea ! I'm In !&lt;/button&gt; 
          &lt;small&gt;We NEVER share the information you provide us.&lt;/small&gt;   
      &lt;/form&gt;
  &lt;/fieldset&gt;
              &lt;/aside&gt;
  </code></pre>