How to color even lines

It is not possible to fill in even rows, the formula always starts working with a new column.

.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>
 0
htmlcss
Author: Air, 2020-02-26
Source

1 answers

Although the answer has already been given in the comments, I will formalize the answer as an answer.

To change even or odd elements, use the pseudo-class :nth-child() where the parameter (in parentheses) specifies the values. Learn more
But we will talk specifically about the parameters responsible for even and odd elements.


Even elements from the beginning

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

When using this pseudo-class, the elements will be selected one by one, starting with counting from 2 (2,4,6,8).

Example:

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>

Odd elements from the beginning

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

Everything is the same as in the previous version, only the elements will be selected from 1 (1,3,5,7)

Example:

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>

I did not just specify "from the beginning" in the header, there is an "inversion" of this
pseudo-class - :nth-last-child(), which allows you to use the same parameters for selection, but from end.

Even elements from the end of

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

When using this pseudo-class, the elements will be selected after one, starting from 2, but counting from the last element (2,4,6,8).

Example:

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>

Odd elements from the beginning

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

Everything is the same as in the previous version, only the elements will be selected from 1, but also from the last one (1,3,5,7)

Example:

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>
 4
Author: CbIPoK2513, 2020-02-26 05:09:48