Серверное время 2018-12-13 21:07:13
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Свойства CSS
CSS по категориям
Статистика
Яндекс.Метрика
Реклама
Реклама

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

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS3+
Значение по умолчанию Нет
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-child(odd | even | <число> | <выражение>) {...}
Аргументы
odd - Все нечетные номера элементов.
even - Все четные номера элементов.
число - Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение - Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child.
5 5 Пятый элемент.
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
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.
Табл. 1. Результат для различных значений псевдокласса
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>nth-child</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы */
}
tr:nth-child(2n) {
background: #f0f0f0; /* Цвет фона */
}
tr:nth-child(1) {
background: #666; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
 <table cellspacing="0" border="1">
  <tr>
   <td>&nbsp;</td><td>2134</td><td>2135</td>
   <td>2136</td><td>2137</td><td>2138</td>
  </tr>
  <tr>
   <td>Нефть</td><td>16</td><td>34</td>
   <td>62</td><td>74</td><td>57</td>
  </tr>
  <tr>
   <td>Золото</td><td>4</td><td>69</td>
   <td>72</td><td>56</td><td>47</td>
  </tr>
  <tr>
   <td>Дерево</td><td>7</td><td>73</td>
   <td>79</td><td>34</td><td>86</td>
  </tr>
  <tr>
   <td>Камни</td><td>23</td><td>34</td>
   <td>88</td><td>53</td><td>103</td>
  </tr>
 </table>
</body>
</html>

Демонстрация примера
В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz