1

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

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

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

0

1 ответ 1

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>

5
  • 2
    :nth-child(2n) или :nth-child(2n + 1) будут работать в 97% браузеров, начиная с IE9
    – andreymal
    16 сен 2017 в 9:39
  • @andreymal, это хорошо, что-то я не туда глянул :)
    – user242433
    16 сен 2017 в 9:40
  • Спасибо) данный вариант тоже рассматривал, но была проблема со структурой и как-то не корректно работало, сейчас поправил все хорошо. Но почему-то не хочет меняться цвет шрифта, видимо он где-то дальше переназначается или специфичность выше, хотя даже при добавлении !important ни чего не меняется. Ладно буду разбираться дальше)
    – kost1k
    16 сен 2017 в 10:19
  • @Cactus, появился еще небольшой вопрос, если у меня вот такая структура <div class="wrapper"> <section> <div class="container"> </div> </section> <section> <div class="container"> </div> </section> <section> <div class="container"> </div> </section> </div> и нужно задать бекграунд для контейнера, то уже так не получится?
    – kost1k
    16 сен 2017 в 10:47
  • @kost1k, вроде получилось:) Обновил ответ. А если в предыдущем комментарии вы говорили, что не получается сменить цвет, то попробуйте ctrl + f5 в хроме. Обновите кэш, иногда помогает:)
    – user242433
    16 сен 2017 в 10:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.