БЛОГ НА HUSL


Как закрасить четные строки

Автор вопроса: DarkLordSauron

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

.container1 {
  border: solid 1px black;
  margin: 1px;
  display: inline-block;
  width: 732px;
}

.cn1 {
  border: solid 1px black;
  margin: 1px;
}

.cnn1 {
  border: solid 1px black;
  margin: 1px;
  display: inline-block;
  margin: 1px;
  width: 100px;
}

.cnn1#cnn2 {
  width: 400px;
}

.cn2 {
  border: solid 1px black;
  display: block;
  text-align: center;
}

.cn2:nth-child(even) {
  background: #FFFACD;
}

.cnn1:nth-child(even) {
  background: #E9967A;
}
<div class="container1">
  <div class="cnn1">
    <div class="cn2">Понедельник</div>
    <div class="cn2">Понедельник</div>
    <div class="cn2">Понедельник</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 8.00-9.30</div>
    <div class="cn2"> 9.40-11.10</div>
    <div class="cn2"> 11.20-12.50</div>
  </div>
  <div class="cnn1" id="cnn2">
    <div class="cn2"> Проектирование и разработка интерфейса пользователя</div>
    <div class="cn2"> Проектирование и разработка интерфейса пользователя</div>
    <div class="cn2"> Проектирование и разработка интерфейса пользователя</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 201</div>
  </div>
  <div class="cnn1">
    <div class="cn2">Вторник</div>
    <div class="cn2">Вторник</div>
    <div class="cn2">Вторник</div>
    <div class="cn2">Вторник</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 8.00-9.30</div>
    <div class="cn2"> 9.40-10.10</div>
    <div class="cn2"> 10.20-11.50</div>
    <div class="cn2"> 12.00-13.30</div>
  </div>
  <div class="cnn1" id="cnn2">
    <div class="cn2"> Численные методы</div>
    <div class="cn2"> Кураторский час</div>
    <div class="cn2"> Графический дизайн и мультимедиа</div>
    <div class="cn2"> Численные методы</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 304</div>
  </div>
  <div class="cnn1">
    <div class="cn2">Среда</div>
    <div class="cn2">Среда</div>
    <div class="cn2">Среда</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 8.00-9.30</div>
    <div class="cn2"> 9.40-11.10</div>
    <div class="cn2"> 11.20-12.50</div>
  </div>
  <div class="cnn1" id="cnn2">
    <div class="cn2"> Проектирование и разработка веб-приложений</div>
    <div class="cn2"> Проектирование и разработка веб-приложений</div>
    <div class="cn2"> Проектирование и разработка веб-приложений</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 201</div>
  </div>
  <div class="cnn1">
    <div class="cn2">Четверг</div>
    <div class="cn2">Четверг</div>
    <div class="cn2">Четверг</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 8.00-9.30</div>
    <div class="cn2"> 9.40-11.10</div>
    <div class="cn2"> 11.20-12.50</div>
  </div>
  <div class="cnn1" id="cnn2">
    <div class="cn2"> Графический дизайн и мультимедиа</div>
    <div class="cn2"> Графический дизайн и мультимедиа</div>
    <div class="cn2"> Графический дизайн и мультимедиа</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 201</div>
  </div>
  <div class="cnn1">
    <div class="cn2">Пятница</div>
    <div class="cn2">Пятница</div>
    <div class="cn2">Пятница</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 8.00-9.30</div>
    <div class="cn2"> 9.40-11.10</div>
    <div class="cn2"> 11.20-12.50</div>
  </div>
  <div class="cnn1" id="cnn2">
    <div class="cn2"> Проектирование и разработка веб-приложений</div>
    <div class="cn2"> Иностранный язык</div>
    <div class="cn2"> Физкультура</div>
  </div>
  <div class="cnn1">
    <div class="cn2"> 303</div>
    <div class="cn2"> 303</div>
    <div class="cn2"> 201</div>
  </div>

</div>


Источник

Ответы (1 шт):

Автор решения: CbIPoK2513

Хоть ответ уже и дали в комментариях, оформлю ответ как ответ.

Для изменения чётных или нечётных элементов используется псевдокласс :nth-child() где параметром (в скобках) указываются значения. Подробнее
Но мы поговорим конкретно о параметрах, отвечающие за чётные и нечётные элементы.


Чётные элементы от начала

elem:nth-child(even)
/* или */
elem:nth-child(2n)

При использование этого псевдокласса будут выбраны элементы через один, начиная отсчёт от 2 (2,4,6,8).

Пример:

ol > li:nth-child(even) {
  background: gray;
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Нечётные элементы от начала

elem:nth-child(odd)
/* или */
elem:nth-child(2n+1)

Всё так же как и в предыдущем варианте, только элементы будут выбраны от 1 (1,3,5,7)

Пример:

ol > li:nth-child(odd) {
  background: gray;
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Я не просто так указал в заголовке "от начала", есть "инверсия" данного
псевдокласса - :nth-last-child(), позволяющая использовать те же самые параметры для выбора, но от конца.

Чётные элементы от конца

elem:nth-last-child(even)
/* или */
elem:nth-last-child(2n)

При использование этого псевдокласса будут выбраны элементы через один, начиная отсчёт от 2, но отсчёт идёт от последнего элемента (2,4,6,8).

Пример:

ol > li:nth-last-child(even) {
  background: gray;
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Нечётные элементы от начала

elem:nth-last-child(odd)
/* или */
elem:nth-last-child(2n+1)

Всё так же как и в предыдущем варианте, только элементы будут выбраны от 1, но тоже от последнего (1,3,5,7)

Пример:

ol > li:nth-last-child(odd) {
  background: gray;
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.