Полезные рецепты использования :nth-child

[buddah]

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

У меня просто голова кружится, когда я сталкиваюсь с такими идеальными для использования селекторами как :nth-child или :nth-of-type! Чем лучше их понимаешь, тем больше css нердгазмов (от слова nerd - ботан, заучка и т.д) получаешь!

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

Выбираем только Пятый элемент:

li:nth-child(5) {
    color: green;
}

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

Выбрать все, кроме первых пяти:

li:nth-child(n+6) {
    color: green;
}

Если бы здесь было больше 10 элементов, такой селектор выбрал бы всех их, начиная с 6-го.

Выбрать первыe пять элементов:

li:nth-child(-n+5) {
    color: green;
}

Выбрать каждый четвертый, начиная с первого:

li:nth-child(4n-7) {  /* или 4n+1 */
    color: green;
}

Выбрать только четные или нечетные:

li:nth-child(odd) {
    color: green;
}

li:nth-child(even) {
    color: green;
}

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

li:last-child {
    color: green;
}

Выбирает 10-ый, потому-что у нас есть 10 элементов. Было бы 8 - выбрал бы 8-ой элемент, 1290 - 1290-ый элемент и т.д

Выбрать второй с конца:

li:nth-last-child(2) {
    color: green;
}

Выбирает 9-тый элемент потому что у нас их 10. Было бы 30 - выбирал бы 29-тый элемент.

Кроссбраузерность:

Кроме ИЕ существует не так много браузеров, о поддержке этих селекторов в которых следует беспокоиться. Для ИЕ используйте Selectivizr.

Edited June 19, 2011 by buddah

[Shift-Web]

>> Для ИЕ используйте Selectivizr.

Хорошая вещь. Жаль но, но иногда даёт побочки ):

[amelice]

Классная статья! Спасибо за перевод, сегодня как раз читала про псевдо-классов и в моей книжке про этих не написано, выборка элемента ограничивается :first-child. Теперь интересно узнать про :nth-of-type.

[buddah]

Пожалуйста. Сам учусь при переводе.

[klierik]

Теперь интересно узнать про :nth-of-type.

Различия между :nth-child и :nth-of-type

[mishka]

Весьма интересно, что :first-child поддерживался ИЕ7, но вот это тселектор не поддерживается вплоть до ИЕ9. Кроме ИЕ существует не так много браузеров, о поддержке этих селекторов в которых следует беспокоиться. Для ИЕ используйте Selectivizr.

:first-child поддерживается ие8.

Не спутал случайно с :last-child? Так как это он поддерживался в ие7, а вот в ие8 - нет.

[buddah]

Трудности перевода. Возможно автор имел ввиду, что как-бы ДОЛЖЕН БЫЛ БЫ поддерживаться в ИЕ7, но этого так и не случилось до самого ИЕ9?

[mishka]

Трудности перевода. Возможно автор имел ввиду, что как-бы ДОЛЖЕН БЫЛ БЫ поддерживаться в ИЕ7, но этого так и не случилось до самого ИЕ9?

:first-child поддерживается ие7+

:last-child поддерживается в ие7, в ие8 уже не поддерживается, в ие9 не проверял.

[buddah]

Трудности перевода. Возможно автор имел ввиду, что как-бы ДОЛЖЕН БЫЛ БЫ поддерживаться в ИЕ7, но этого так и не случилось до самого ИЕ9?

:first-child поддерживается ие7+

Тогда все верно, я так и перевел.

[mishka]

Трудности перевода. Возможно автор имел ввиду, что как-бы ДОЛЖЕН БЫЛ БЫ поддерживаться в ИЕ7, но этого так и не случилось до самого ИЕ9?

:first-child поддерживается ие7+

Тогда все верно, я так и перевел.

Прочитав эту строку:

Весьма интересно, что :first-child поддерживался ИЕ7, но вот этот селектор не поддерживается вплоть до ИЕ9.

я чего-то совсем не понял что :first-child поддерживается ие7+, скорее наоборот.

Вот и говорю, что может там ты перепутал :first-child с :last-child?

[buddah]

Значит Коер перепутал, потому что он говорит:

Interestingly enough, :first-child was supported by IE 7

Я вообще уберу упоминание об этом с перевода, чтобы не путать народ.

[SelenIT]

Имхо,

Interestingly enough, :first-child was supported by IE 7, but it's not until IE 9 where the rest of this stuff is supported.

"Занятно, что :first-child поддерживался еще IE7, но до выхода IE9 это ("ослиное" семейство — прим. моё) — не то место, где поддерживаются остальные вышеперечисленные классные штуки". Или, более по-русски и по-простому, "Занятно, что :first-child работал уже в IE7, но вот всё остальное из перечисленного начало поддерживаться в IEшках только с 9-ки". По сути всё было правильно

:last-child поддерживается в ие7

mishka, что, вправду? IE9 в режиме эмуляции прошел лишь 2 субтеста из семи...