→   Полосатая таблица или псевдокласс :nth-child()

У нас есть вот такой html:

Код   (кликабельно)

  1. <table class="table-test-odd">
  2.   <tr>
  3.         <td>1.</td>
  4.         <td>even - row</td>
  5.   </tr>
  6.   <tr>
  7.         <td>2.</td>
  8.         <td>odd - row</td>
  9.   </tr>
  10.   <tr>
  11.         <td>3.</td>
  12.         <td>even - row</td>
  13.   </tr>
  14.   <tr>
  15.         <td>4.</td>
  16.         <td>odd - row</td>
  17.   </tr>
  18.   <tr>
  19.          <td>5.</td>
  20.          <td>even - row</td>
  21.   </tr>
  22.   <tr>
  23.       <td>6.</td>
  24.         <td>odd - row</td>
  25.   </tr>
  26.   <tr>
  27.         <td>7.</td>
  28.         <td>odd - row</td>
  29.   </tr>
  30.   <tr>
  31.         <td>8.</td>
  32.         <td>odd - row</td>
  33.   </tr>
  34.   <tr>
  35.         <td>9.</td>
  36.         <td>even - row</td>
  37.   </tr> 
  38. </table>

Короче это девятистрочная таблица с классом .table-test-odd, допустим на странице много таблиц, но покрасить нужно только одну поэтому, чтобы ее выделить придумываем ей какой-нибудь класс.

Далее нужно совершить всего два действия:

1) Написать соотвествующий CSS:

  1.     .odd {
  2.         background:#06f;
  3.         color:#e4e4e4;
  4.         }
  5.                             
  6.     .table-test-odd {
  7.         width:400px;
  8.         border-collapse:collapse;
  9.         border:1px #e4e4e4 solid;
  10.         }

Где .odd класс для нечетной строки в таблице.

2) Подключить два js один из них это jQuery.js, а второй это маленький плагин, с помощью которого можно красить четные и нечетные строки в таблице.

подключаем jQuery ↓
<script type="text/javascript" src="jQuery.js"></script>

 

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.          $('.table-test-odd tr:odd').addClass('odd');
  4.          $('.table-test-odd tr:even').addClass('even');
  5.      });
  6. </script>

Ну и смотрим результат:

1. odd - row
2. even - row
3. odd - row
4. even - row
5. odd - row
6. even - row
7. odd - row
8. even - row
9. odd - row

 

кстати, используя, всё тот же плагин можно покрасить также и чётные строки в таблице, описав в css класс .even

 

Псевдокласс :nth-child()

На самом деле, :odd и :even являются частным воплощением псевдокласса :nth-child с единственной лишь разницей, они не берут во внимание родительский объект наших строк, а всего лишь «фильтруют» список элементов.

Иными словами, :odd эквивалентен записи: :nth-child(2n+1), а :even эквивалентен записи: :nth-child(2n). С помощью этого псевдокласса можно добираться практически до любого элемента. Впрочем, вот даже можно составить произвольную таблицу:

 

Значение :nth-child() порядковый номер элемента Описание
1 1 Самый первый элемент, эквивалентен записи :first-child.
7 7 Седьмой элемент.
2n 2, 4, 6, 8, 10 Все четные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения odd.
3n+2 2, 5, 8, 11, 14 —
-n+3 3, 2, 1 —
5n-2 3, 8, 13, 18, 23, 28 —
even 2, 4, 6, 8, 10, 12, 14 Все четные элементы.
odd 1, 3, 5, 7, 9, 11, 13, 14 Все нечетные элементы.

 

кстати, чтобы добраться до самого последнего элемента можно использовать псевдокласс: :last-child