четные и нечетные псевды для этой разметки

Question

У меня есть некоторые HTML, что будет в этом формате

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <h1 class="birch">Testimonials</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 name"> 
      <p>Odd Name</p> 
     </div> 
    </div> 
    <div class="row"> 
      <div class="col-lg-offset-1 col-lg-11 col-md-offset-1 col-md-11 col-sm-12 col-xs-12 quote"> 
       <p>Odd Quote</p> 
      </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 name"> 
      <p>Even Name</p> 
     </div> 
    </div> 
    <div class="row"> 
      <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 quote"> 
       <p>Even Quote</p> 
      </div> 
    </div> 
</div> 

Я хочу нечетные имена/цитаты иметь несколько иной CSS для четных. Я попробовал это, однако, он применил его либо к обоим, либо к ни одному из них. Это то, что я могу сделать только с помощью CSS, мне нужен Javascript для этого?

.quote:nth-child(odd) { 
    border-right:solid 5px #CCCCCC; 
    border-left:none; 
} 

.name:nth-child(odd) { 
    text-align:right; 
} 

Answer 1

Вы можете сделать это, поставив селектор :nth-child(4n-2) на .row вместо вложенных div. Затем будет выбрана каждая четвертая строка после второй строки, которая, как оказалось, будет тем, что вы хотите быть нечетным. В этом случае код будет таким:

.row:nth-child(4n-2) .name { 
    text-align:right; 
} 
.row:nth-child(4n-1) .quote { 
    border-right:solid 5px #CCCCCC; 
    border-left:none; 
} 

View demo

Что бы выбрать .name элемент внутри 2-й, 6-й, 10-й и т.д. ряд, и .quote элемент внутри 3-й, 7-й, 11-й и т. Д. Строка таблицы.