:nth-child
Опис CSS властивості :nth-child:
Псевдокласс: nth-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів.
Синтаксис CSS властивості :nth-child:
елемент:nth-child(odd | even | <число> | <вираз>) {...}
Аргументи CSS властивості :nth-child:
odd Всі непарні номери елементів.
even Всі парні номери елементів.
число Порядковий номер дочірнього елемента відносно свого батька. Нумерація починається з 1, це буде перший елемент у списку.
вираз Задається у вигляді an + b, де a і b цілі числа, а n - лічильник, який автоматично приймає значення 0, 1, 2 ...
Якщо a дорівнює нулю, то воно не пишеться і запис скорочується до b. Якщо b дорівнює нулю, то воно також не вказується і вираз записується у формі an. a і b можуть бути негативними числами, в цьому випадку знак плюс міняється на мінус, наприклад: 5n-1. За рахунок використання від'ємних значень a і b деякі результати можуть також отримати негативний або рівними нулю. Однак на елементи впливають тільки позитивні значення через те, що нумерація елементів починається з 1.
even Всі парні номери елементів.
число Порядковий номер дочірнього елемента відносно свого батька. Нумерація починається з 1, це буде перший елемент у списку.
вираз Задається у вигляді an + b, де a і b цілі числа, а n - лічильник, який автоматично приймає значення 0, 1, 2 ...
Якщо a дорівнює нулю, то воно не пишеться і запис скорочується до b. Якщо b дорівнює нулю, то воно також не вказується і вираз записується у формі an. a і b можуть бути негативними числами, в цьому випадку знак плюс міняється на мінус, наприклад: 5n-1. За рахунок використання від'ємних значень a і b деякі результати можуть також отримати негативний або рівними нулю. Однак на елементи впливають тільки позитивні значення через те, що нумерація елементів починається з 1.
Значення по замовчуванні CSS властивості :nth-child:
немає
Приклад використання CSS властивості :nth-child:
<style type="text/css"> TABLE { width: 100%; } tr:nth-child(2n) { background: #f0f0f0; } tr:nth-child(1) { background: #666; color: #fff; } </style> <table cellspacing="0" border="1"> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Текст1</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Текст2</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Текст3</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Текст4</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> Використання CSS властивості :nth-child:
всі елементи