RealAdmin.ru

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

CSS,Веб-дизайн
Категория: Сайтострой
17 май 2015 г. в 23:27

Третье поколение CSS принесло в вёрстку такое понятие, как псеводклассы. Сегодня речь пойдет о first-child, last-child и nth-child. С помощью них можно легко переоформить первый или последний элемент списка, изменить цвет второй строки таблицы или выделить первые пять ячеек таблицы. И всё это без использования javascript.

  • «first-child» — выбирает первый элемент родителя;
  • «last-child» — указывает на последний элемент родителя;
  • «nth-child» — выбирает элементы исходя по параметру с начала;
  • «nth-last-child» — то же самое, но начиная с конца.

С помощью «first-child» и «last-child» можно выбрать и переоформить первый или последний элемент родителя. Посмотрим как это выглядит на примере. Для этого применим стили к ячейкам таблицы с идентификатором «primer» (id="primer").

<style>
    #primer tr:first-child td { background-color:red; }
    #primer tr:last-child td { background-color:green; }
</style>
1.11.21.31.4
2.12.22.32.4
3.13.23.33.4
4.14.24.34.4
5.15.25.35.4

Псевдолкасс «nth-child» предоставляет более интересные возможности. Он позволяет применить стиль к элементам в зависимости от их порядкового номера в дереве DOM. Псевдокласс может принимать параметры:

  • «odd» — выбрать нечетные элементы;
  • «even» — выбрать четные элементы;
  • число — выбрать элемент с определенным порядковым номером;
  • выражение вида an+b.

Примеры использования nth-child()

Начинаем разбираться. Применим к таблице стиль для задания фона чётным и нечетным строкам:

<style>
    #primer tr:nth-child(odd) td { background-color:red; }
    #primer tr:nth-child(even) td { background-color:green; }
</style>
1.11.21.31.4
2.12.22.32.4
3.13.23.33.4
4.14.24.34.4
5.15.25.35.4

Если в качестве параметра к nth-child() указать число, то можно выделить элементы по их порядковому номеру внутри родительского:

<style>
    #primer td:nth-child(2) { background-color:red; }
    #primer td:nth-child(3) { background-color:green; }
</style>
1.11.21.31.4
2.12.22.32.4
3.13.23.33.4
4.14.24.34.4
5.15.25.35.4

В качестве параметра можно задавать выражения вида «an+b», где «a» и «b» целые числа, а «n» — переменная, которая последовательно изменяется от 0 до количества элементов селектора. Рассмотрим пример выделения красным цветом только первых двух строк и каждого четвертого столбца.

<style>
    #primer tr:nth-child(-n+2) td { background-color:red; }
    #primer td:nth-child(4n+4) { background-color:red; }
</style>
1.11.21.31.41.51.61.71.8
2.12.22.32.42.52.62.72.8
3.13.23.33.43.53.63.73.8
4.14.24.34.44.54.64.74.8
5.15.25.35.45.55.65.75.8

Выбора только первых трёх элементов списка:

li:nth-child(-n+3)

Выбора последних трёх элементов списка:

li:nth-child(n+3)

Выбора каждого третьего элемента списка:

li:nth-child(3n+1)

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

Осталось разобрать псевдокласс «nth-last-child». Его отличие от «nth-child» в том, что весь отсчёт идёт от конца селектора. Примером может служить ситуация, когда требуется выделить ячейку таблицы «ИТОГО». Как правило, это последняя ячейка последней строки:

<style>
    #primer tr:nth-child(1) td:nth-child(1) {background-color:red;}
    #primer tr:nth-last-child(1) td:nth-last-child(1) {background-color:green;}
</style>
1.11.21.31.4
2.12.22.32.4
3.13.23.33.4
4.14.24.34.4
5.15.25.35.4

Псевдоклассы CSS могут применяться к любым элементам html документа.

Посмотрите похожее — 6
Комментарии —
    © REALADMIN.RU   2018 г.
    Страница сгенерирована: 0,5829 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top