Я приветствую вас на своем блоге. Хотел бы сегодня написать на тему, как выбрать в css первый элемент родителя, потому что это позволяет использовать меньше стилевых классов.

Псевдоклассы:first-child и first-of-type в чем разница?

Для того, чтобы в css обратиться к первому элементу из родительского контейнера, были придуманы два псевдокласса. Я сразу же предлагаю рассмотреть все на примере, чтобы вы поняли:

Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:

#wrapper p:first-child{
Color: red;
}

Цвет первого абзаца станет красным, можете проверить.

#wrapper p:first-of-type{
color: red;
}

Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.

Это абзац

Это абзац

Это абзац

Это абзац

Это абзац

А теперь подумайте: сработает ли в этом случае first-of-type ? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.

Лично я не сразу понял разницу между этими псевдоклассами и какое-то время путался, но сейчас, я надеюсь, нормально вам объяснил.

Еще важная деталь

Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:

Li:first-of-type{
…
}

То выбран будет первые пункты списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому.
Если же написать так:

#sidebar li:first-of-type{
…
}

То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.

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

Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.

Где вы можете использовать на практике

Я пишу об этих псевдоклассах потому, что они активно используются при верстке с помощью css. Вот есть у вас на странице, например, блок похожих записей, или комментариев, или еще чего. И у вас возникла идея как-то по особенному оформить его первый элемент. А может, последний. Да и вообще любой можно.

Вам всего лишь нужно узнать название блока, в котором хранится нужный элемент. Допустим, имеем дело с популярными записями. Родительский контейнер имеет класс popular. Тогда пишем так:

Popular li:first-of-type{
Padding-top: 20px;
}

Все, первый пункт списка в нем получил отступ сверху, а можно дописать в стили все, что вам захочется.

Вот еще такой пример. У меня в теге body всего три одинаковых серых блока. Напишем так.

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

Tr:nth-child (odd) { // background color } tr:nth-child (even) { // another background color }

Еще псевдокласс:nth-child позволяет разделить элементы с общим свойством на группы и затем выбрать определенный элемент из каждой группы, используя следующий синтаксис:

Tr:nth-child (an+b) { }

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1 , то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2 , то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

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

Tr:nth-child (4n+4 ) { // задаем стили каждому четвертому элементу }

Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами:nth-child, :first-child и:last-child, чтобы выбрать элементы, которые хотим выделить.

Использование псевдокласса CSS:nth-child для выбора единственного элемента

Задавая псевдоклассу:nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (4 ) { font-size:150

Использование псевдокласса CSS:nth-child для выбора всех элементов, кроме первых пяти

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (n+6 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только первых пяти элементов

Когда мы задаем псевдоклассу:nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (-n+5 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора каждого третьего элемента

Псевдокласс:nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1 , будет выбран каждый третий элемент, начиная с первого:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (3n+1 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только нечетных элементов

Можно задать псевдоклассу:nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (odd) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только четных элементов

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (even) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:first-child для выбора первого элемента

Другой псевдокласс:first-child выберет первый элемент:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:first-child { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:last-child для выбора последнего элемента

Кроме псевдокласса:first-child есть псевдокласс:last-child, который выберет последний элемент из группы элементов:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:last-child { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-last-child для выбора предпоследнего элемента

Еще можно использовать псевдокласс:nth-last-child, который совмещает в себе возможности псевдоклассов:last-child и:nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-last-child (2 ) { font-size:150 %; font-weight:bold ; color:green ; }

Ознакомьтесь с возможностями псевдокласса:nth-child с помощью «

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

В этой статье мы рассмотрим:

• различные способы использования :nth-child ;
• более гибкий селектор :nth-of-type ;
• и связанные с ними селекторы :nth-last-child и :nth-last-of-type .

:nth-last-of-type

:nth-last-of-type выбирает дочерние элементы, если их позиция в документе совпадает с шаблоном, описываемым алгебраическим выражением.

Селектор :nth-last-of-type выглядит примерно так:

li:nth-child(выражение); {}

«Выражение » может быть представлено ключевыми словами even или odd , целым числом или формулой по типу an+b , где a и b — целые числа, положительные или отрицательные.

Поскольку псевдокласс CSS nth child может использоваться для выбора диапазона различных элементов. Давайте рассмотрим несколько примеров, чтобы стало понятнее.

У меня есть маркированный список из 12 элементов. Посмотрим, как можно использовать :nth-child для выбора определенного элемента или набора элементов по шаблону:

• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum

Чтобы выбрать третий элемент списка, нужно указать li:nth-child(3) . Чтобы выбрать все четные элементы, можно использовать ключевое слово even. И наоборот, можно использовать :nth-child(odd) , чтобы выбрать все элементы с нечетным номером.

CSS nth child каждый 3 й — указываем li:nth-child(3n) . Чтобы выбрать первые четыре элемента, используем li:nth-child(-n+4) . Чтобы выбрать все, кроме первых четырех элементов, можно использовать li:nth-child(n+5) .

Выражение an + b

Альтернативой использованию ключевого слова odd является использование выражения 2n+1 . Но как это работает?

Когда выражение в формате an+b содержит отличные от ноля значения a и b , дочерние элементы разбиваются на группы. Если это выражение 2n+1 , дочерние элементы разбиваются на группы по два. Каждому элементу в группе присваивается индекс, начиная с 1 . Соответствующий элемент в каждой группе — это индекс номер b . В нашем примере это будет первый элемент.

Если выражение 3n+2 , элементы группируются по три элемента, и второй элемент в каждой группе соответствует выражению.

Если значение b является отрицательным, соответствующим в группе является элемент с индексом b . Но отсчитывается он в обратном направлении от индекса 1 . В этом случае соответствующий элемент будет принадлежать не данной, а предшествующей группе.

Ключевое слово even в CSS nth child может быть выражено как 2n . В этом случае у нас нет значения b , поэтому выбирается каждый элемент группы с индексом a ; 2n выбирает каждый второй элемент, 3n — каждый третий, 4n — каждый четвертый и так далее.

Лично я считаю, что концепция разбивки дочерних элементов на группы и поиска индекса соответствия для каждой группы очень запутана. Хотя именно так их описывает спецификация CSS-селекторов .

Мне больше нравится концепция поиска каждого n-ного элемента — каждого 2-го, 3-го или 4-го и т.д. А потом мне проще представить, что вторая часть выражения — это смещение.

В случае 2n+1 я читаю это выражение следующим образом: «Найти каждый второй элемент и переместить выделение вниз на 1 ».

Если выражение 3n-5 , оно будет читаться так: «Найти каждый третий элемент и переместить выделение вверх на 5 ».

Другие селекторы:nth-child

:nth-child имеет соответствующий ему псевдокласс :nth-last-child , который работает наоборот.

li:nth-last-child(3n) начинает с последнего дочернего элемента и обрабатывает их в обратном направлении, сопоставляя каждый третий элемент с конца списка.

Этот псевдокласс менее распространен. Тем не менее, часто необходимо выбрать первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1) , но этот метод встречается не так часто, как псевдоклассы :first-child и :last-child . При этом только :first-child работает в IE8 , а :last-child и :nth-селекторы — нет.

:nth-of-type

Что меня часто не удовлетворяет, так это то, что псевдокласс CSS nth child отбирает дочерние элементы по индексу и не учитывает тип элемента.

Рассмотрим следующий пример.