Как удобнее задать стили

535

18 сентября 2017, 02:07

Имеются секции с чередующимся цветом фона и текста, как удобнее задать стили, чтобы не прописывать их для каждой секции.

Есть класс с общими стилями секций, у меня из вариантов только добавить к нечетным секциям еще один класс который будет задавать цвет фона и текста.

Есть еще какие нибудь предложения или варианты?

Answer 1

Как вариант:

Используйте псевдокласс :nth-child. Подробнее...
Подробнее о поддержке в разных браузерах...

.block > .row >.item:nth-child(odd) { 
  background: #fff; 
} 
.block > .row >.item:nth-child(even) { 
  background: #000; 
} 
 
.block > .row-o >.item:nth-child(even) { 
  background: #fff; 
} 
 
.block > .row-o >.item:nth-child(odd) { 
  background: #000; 
} 
 
.item { 
  width: 25%; 
  height: 150px; 
  float: left; 
}

<div class="block"> 
  <div class="row"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
  <div class="row-o"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
  <div class="row"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
  <div class="row-o"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
</div>

UPD

.container { 
  width: 33.3333%; 
  float: left; 
  height: 150px; 
  background: green; 
} 
 
.wrapper > section:nth-child(even) > .container { 
  background: red; 
}

<div class="wrapper"> 
 
  <section> 
    <div class="container"> 
    </div> 
  </section> 
 
  <section> 
    <div class="container"> 
    </div> 
  </section> 
 
  <section> 
    <div class="container"> 
    </div> 
  </section> 
 
</div>