부트 스트랩 내의 n 번째 자식 의사 선택기

Question

4 개의 열이 있는데 각 열에 특정 클래스를 추가하지 않고 각기 다른 테두리 색을 사용하고 싶습니다.

그래서이 작업을 수행하기 위해 :nth-child을 사용하려고합니다. 가 여기에이 마크 업을 가지고 jsfiddle

입니다 : 여기

 <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> 

를 CSS입니다 : .thumbnail:nth-child(1) {border:1px solid red;}

그러나 이것은 내가 기대하지 단지 하나가 변경되는 모든 열을 변화하고 있습니다. 어떻게하면됩니까?

Answer 1

당신은 사용할 수 없습니다 : n 번째의 아이를이 시점에서 .thumbnail은 항상 첫 번째 자식이기 때문에 : 당신은 2 개 행이

,이 같은 각 행 내부에 첫 아이 마지막 아이를 사용할 수 있도록 :

.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;} 

이나와

: n 번째 자녀가 귀하의 질문에서 명확하지 그래서 어떤 것들 변경하려는 할 ...

.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;}