RealAdmin.ru

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

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

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

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

С first-child и last-child должно быть всё понятно. С помощью них можно выбрать первый и последний элемент родителя. Посмотрим как это выглядит на примере. Для этого будем применять стили к ячейкам таблицы с идентификатором 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 предоставляет нам более интересные возможности. С его помощью можно применить стиль к элементам родителя в зависимости от порядкового номера в дереве элементов. Данный псевдокласс может принимать следующие параметры:

  • «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

Таким образом в таблицах можно задать фон для четных и нечетных строк. Именно так, а не с помощью javascript, как делают неопытные верстальщики.

Если в качестве параметра к 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
Комментарии — 0
    © REALADMIN.RU   2016 г.
    Страница сгенерирована: 0,2223 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top