Просмотров: 8 088

CSS. Как выбрать каждый первый, второй, третий и.т.д. элементы списка, таблицы, блока.

Иногда нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.

Для примера возьмем немаркированный список:

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child

ul li:nth-child(5) {color:#F00;}

Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.

Вот какой результат получился.

26-05-2013 20-09-19

Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.

Аналогичным образом можно выбирать любые другие элементы, в зависимости от их расположения в дереве (структуре) документа.

Вот несколько книг, которые помогут вам разобраться в верстке сайтов и CSS более подробно.

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2

  • Андрей

    Спасибо, искал раньше такой код, думал, что его вообще не существует. 🙂

  • Антон

    То что нужно! Быстро нашел статью в Яндексе, быстро решил похожую задачу спасибо автору!

  • Михаил

    спасибо