title: nth-child pseudo selector within bootstrap
body: <p>I have 4 columns and I want each one of them to have a different border color without adding a specific class to each one.</p>
  
  <p>So, I'm thinking to use <code>:nth-child</code> to make this work.
  Here is a <a href="http://jsfiddle.net/dynamyc/9da2G/" rel="nofollow">jsfiddle</a></p>
  
  <p>I have this markup:</p>
  
  <pre><code>        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
  
  
            &lt;div class="col-lg-6 flush-col"&gt;
  
            &lt;div class="thumbnail"&gt;
  
  
            &lt;h3&gt;DUMMY CONTENT&lt;/h3&gt;
  
           &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;div class="col-lg-6 flush-col"&gt;
  
            &lt;div class="thumbnail"&gt;
  
  
  
            &lt;h3&gt;DUMMY CONTENT&lt;/h3&gt;
  
           &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;  
  
  
  
          &lt;div class="row"&gt;
           &lt;div class="col-lg-6 flush-col"&gt;
  
            &lt;div class="thumbnail"&gt;
  
  
            &lt;h3&gt;DUMMY CONTENT&lt;/h3&gt;
  
           &lt;/div&gt;
  
            &lt;/div&gt;
  
          &lt;div class="col-lg-6 flush-col"&gt;
  
            &lt;div class="thumbnail"&gt;
  
  
            &lt;h3&gt;DUMMY CONTENT&lt;/h3&gt;
  
           &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css: <code>.thumbnail:nth-child(1) {border:1px solid red;}</code></p>
  
  <p>But this is changing all the columns not just the one I expect to be changed.
  How can I make this work? </p>