CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
agis
agis

Reputation: 1841

nth-child pseudo selector within bootstrap

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.

So, I'm thinking to use :nth-child to make this work. Here is a jsfiddle

I have this markup:

        <div class="container">
        <div class="row">


          <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        <div class="col-lg-6 flush-col">

          <div class="thumbnail">



          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        </div>  



        <div class="row">
         <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>

        <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        </div>

      </div>

Here is the css: .thumbnail:nth-child(1) {border:1px solid red;}

But this is changing all the columns not just the one I expect to be changed. How can I make this work?

Upvotes: 0

Views: 1162

Answers (1)

Ragnar
Ragnar

Reputation: 4578

You can't use :nth-child at this point because .thumbnail is always the first child:

You have 2 rows, so you can use first-child and last-child inside each row like this:

.container .row:first-child .flush-col:first-child .thumnail {border:1px solid red;}
.container .row:first-child .flush-col:last-child .thumnail {border:1px solid blue;}
.container .row:last-child .flush-col:first-child .thumnail {border:1px solid black;}
.container .row:last-child .flush-col:last-child .thumnail {border:1px solid yellow;}

or with :nth-child

.container .row:nth-child(1) .flush-col:nth-child(1) .thumnail {border:1px solid red;}
.container .row:nth-child(1) .flush-col:nth-child(2) .thumnail {border:1px solid blue;}
.container .row:nth-child(2) .flush-col:nth-child(1) .thumnail {border:1px solid black;}
.container .row:nth-child(2) .flush-col:nth-child(2) .thumnail {border:1px solid yellow;}

Upvotes: 1

Related Questions