Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

ДемоИсходники

Здравствуйте уважаемые читатели! При просомтре таблиц с большим количеством строк и столбцов бывает сложно отследить какие данные относятся к конкретной строке. Поэтому чтобы улучшить восприятие информации пользователями сайта и повысить юзабилити, можно использовать чередование фонового цвета в строках таблицы, либо в кнопках навигационного меню.

С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child, который позволяет выбрать все четные или нечетные элементы, используя значения odd— нечетные или even— четные элементы, либо числовое выражение an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2... и так далее. Перейдем от теории к практике.

Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

HTML-код таблицы с минимальным оформлением:

<style>
  table {
    border-collapse: collapse;
    margin: 0px auto;
  }
  th, td {
    border: solid 1px #000;
    padding: 5px;
  }
</style>
<table>
  <thead>
    <tr>
      <td>М</td><td>Команда</td><td>И</td><td>В</td><td>Н</td><td>П</td><td>Заб</td><td>Проп</td><td>О</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>Зенит</td><td>30</td><td>20</td><td>7</td><td>3</td><td>58</td><td>17</td><td>67</td>
    </tr>
    <tr>
      <td>2</td><td>ЦСКА</td><td>30</td><td>19</td><td>3</td><td>8</td><td>67</td><td>27</td><td>60</td>
    </tr>
    <tr>
      <td>3</td><td>Краснодар</td><td>30</td><td>17</td><td>9</td><td>4</td><td>52</td><td>27</td><td>60</td>
    </tr>
    <tr>
      <td>4</td><td>Динамо</td><td>30</td><td>14</td><td>8</td><td>8</td><td>53</td><td>36</td><td>50</td>
    </tr>
    <tr>
      <td>5</td><td>Рубин</td><td>30</td><td>13</td><td>9</td><td>8</td><td>39</td><td>33</td><td>48</td>
    </tr>
    <tr>
      <td>6</td><td>Спартак</td><td>30</td><td>12</td><td>8</td><td>10</td><td>42</td><td>42</td><td>44</td>
    </tr>
    <tr>
      <td>7</td><td>Локомотив</td><td>30</td><td>11</td><td>10</td><td>9</td><td>31</td><td>25</td><td>43</td>
    </tr>
    <tr>
      <td>8</td><td>Мордовия</td><td>30</td><td>11</td><td>5</td><td>14</td><td>22</td><td>43</td><td>38</td>
    </tr>
    <tr>
      <td>9</td><td>Терек</td><td>30</td><td>10</td><td>7</td><td>13</td><td>30</td><td>30</td><td>37</td>
    </tr>
    <tr>
      <td>10</td><td>Кубань</td><td>30</td><td>8</td><td>12</td><td>10</td><td>32</td><td>36</td><td>36</td>
    </tr>
    <tr>
      <td>11</td><td>Амкар</td><td>30</td><td>8</td><td>8</td><td>14</td><td>25</td><td>42</td><td>32</td>
    </tr>
    <tr>
      <td>12</td><td>Уфа</td><td>30</td><td>7</td><td>10</td><td>13</td><td>26</td><td>39</td><td>31</td>
    </tr>
    <tr>
      <td>13</td><td>Урал</td><td>30</td><td>9</td><td>3</td><td>18</td><td>31</td><td>44</td><td>30</td>
    </tr>
    <tr>
      <td>14</td><td>Ростов</td><td>30</td><td>7</td><td>8</td><td>15</td><td>27</td><td>51</td><td>29</td>
    </tr>
    <tr>
      <td>15</td><td>Торпедо</td><td>30</td><td>6</td><td>11</td><td>13</td><td>28</td><td>45</td><td>29</td>
    </tr>
    <tr>
      <td>16</td><td>Арсенал Тула</td><td>30</td><td>7</td><td>4</td><td>19</td><td>20</td><td>46</td><td>25</td>
    </tr>
  </tbody>
</table>

Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк. Для этого добавляем следующий CSS-код:

<style>
  tbody tr:nth-child (odd) {
    background-color: #C9E4F6;/* фон нечетных строк */
  }
  tbody tr:nth-child (even) {
    background-color: #B4DAF2;/* фон четных строк */
  }
</style>

Результат:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

Можно сделать акцент на столбцы оформив вертикальную зебру. Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td. А при наведении на строку выделять ее цветом с помощью псевдокласса hover:

<style>
  td:nth-child (odd) {
    background-color: #C9E4F6;/* фон нечетных столбцов */
  }
  td:nth-child (even) {
    background-color: #B4DAF2;/* фон четных столбцов */
  }
  tr:hover td{
    background: #B4FFF2;/* фон строки при наведении */
  }
</style>

Результат:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

Тоже самое можно сделать и для списков. В статье горизонтальное меню с помощью CSS мы сделали несколько вариантов горизонтального меню. Вот одно из них:

• Главная
• Новости
• Контакты
• О сайте

Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:

<style>
  ul#menu li:nth-child (odd) {
    background-color: #01638D;/* фон нечетных пунктов меню */
  }
</style>

Результат:

• Главная
• Новости
• Контакты
• О сайте

Полный код меню:

<style>
  #menu, #menu li {
    margin: 0;
    padding: 0;
  }
  #menu {
    text-align: center;
    background: #03658e;
  }
  #menu li{
    display:inline-block;
    text-align: center;
    width: 20%;
  }
  #menu a {
    display: block;
    padding: 5px 15px;
    color: #fff;
    font-size:150%;
    text-decoration: none;
  }
  #menu a:hover {
    background: #8AB8CC;
  }
  #menu li:nth-child (odd) {
    background: #278CB7;/* фон нечетных пунктов меню */
  }
</style>
<ul id="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О сайте</a></li>
</ul>

Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:

li:nth-child (1){
  color:orange;
}

Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:

tr:nth-child (n + 3){
  background-color: silver;
}

Можно выделить какой-то диапазон, например с четвертого по седьмой:

tr:nth-child (n+4):nth-child (-n+7){
  font-size: 20px;
}

Так с помощью простых манипуляций с CSS стилями и псевдокласса nth-child можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.

Страница со всеми примерами из статьи.

Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!