title: How to select multiple elements using CSS
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;div class="c1"&gt;
    &lt;div class="c2"&gt;
      &lt;div class="c3"&gt;
        &lt;input&gt;
        &lt;textarea&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;input&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to match the <code>input</code> and <code>textarea</code> elements from the <code>div.c3</code> with only one CSS rule. I'm using </p>
  
  <pre><code>div.c1 .c2 .c3 input,textarea { border: 1px solid #f00; }
  </code></pre>
  
  <p>but this matches all textareas, not only the one cotnained in the <code>c3</code> div. </p>
  
  <p>Is this possible, or must I write separate CSS selectors for each element?</p>
  
  <p>Look at <a href="http://jsfiddle.net/Bp3qn/1/" rel="noreferrer">http://jsfiddle.net/Bp3qn/1/</a> for the live example.</p>
  
  <hr>
  
  <p>I updated <a href="http://jsfiddle.net/Bp3qn/3/" rel="noreferrer">http://jsfiddle.net/Bp3qn/3/</a></p>
  
  <p>I only need the input and textarea contained in the c1->c2->c3 containers to be highlighted, not other combinations.</p>