Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Ispolzovanie-psevdoklassa-nth-child

Использование псевдокласса :nth-child

Использование :nth-childВ этой статье я первый раз напишу про использование псевдокласса :nth-child. Он используется для добавления стиля к выбранному элементу на основе дерева нумерации элементов. Немного сложное определение. Проще сказать, что обычно он добавляет стиль тем элементам, которые находятся внутри какого-то одного родительского элемента.

Уже можно догадаться, что он может использоваться например для списка, таблиц, каких-либо выпадающих пунктов меню и т.д. Я буду менять вот такую таблицу:

Значение Номера элементов Описание
1 1 Первый элемент, является синонимом псевдокласса :first-child.
5 5 Пятый элемент.
2n 2, 4, 6, 8, 10 Все четные элементы, аналог значения even.
2n+1 1, 3, 5, 7, 9 Все нечетные элементы, аналог значения odd.
even 2, 4, 6, 8, 10 Все четные элементы.
odd 1, 3, 5, 7, 9 Все нечетные элементы.

Её код HTML:

<table>
    <tbody>
        <tr>
            <th>Значение</th>
            <th>Номера элементов</th>
            <th>Описание</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>Первый элемент, является синонимом псевдокласса :first-child.</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>Пятый элемент.</td>
        </tr>
        <tr>
            <td>2n</td>
            <td>2, 4, 6, 8, 10</td>
            <td>Все четные элементы, аналог значения even.</td>
        </tr>
        <tr>
            <td>2n+1</td>
            <td>1, 3, 5, 7, 9</td>
            <td>Все нечетные элементы, аналог значения odd.</td>
        </tr>
        <tr>
            <td>even</td>
            <td>2, 4, 6, 8, 10</td>
            <td>Все четные элементы.</td>
        </tr>
        <tr>
            <td>odd</td>
            <td>1, 3, 5, 7, 9</td>
            <td>Все нечетные элементы.</td>
        </tr>
    </tbody>
</table>

Пропишем стили для первой строчки таблицы, а после для нечетных строк таблицы:

table {     
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячейками */
     text-align:center; /* Выравниваем текст по центру */
   }
   tr:nth-child(2n+1) { /* (2n+1) - задаём нечётные строчки */
    background: #cfc0cf; /* Цвет фона */
   } 
   tr:nth-child(1) { /* (1) - задаём стиль для первой строки */
    background: #000000; /* Цвет фона */
    color: #fff; /* Цвет текста */
   } 

В итоге вот что у меня получилось. На этом я думаю стоит остановиться. Добавлю лишь, что следующая статья будет несколько необычной, в ней будут задействована сразу функция attr() и только, что рассмотренный псевдокласс :nth-child.



наверх