Селектор :nth-child(n)
вміє вибирати один чи кілька елементів за індексами, що знаходяться всередині одного батьківського елемента. На відміну від :nth-child()
, селектор :nth-of-type()
вибирає тільки потрібні типи елементів.
n
в селекторі :nth-child(n)
може бути числом, ключовим словом чи формулою. Простіше за все зрозуміти, як працюють ці селектори, буде на прикладах.
Як вибрати третій елемент
li:nth-child(3) { color: yellow; }
Потрібно тільки вказати номер вкладеного елемента.
Як вибрати всі елементи після третього
li:nth-child(n+4) { color: yellow; }
Нумерація починається з нуля, тому перший елемент буде мати номер 0+4.
Як вибрати перші п’ять елементів
li:nth-child(-n+5) { color: yellow; }
Вибір елементів певного типу
Також ви можете вибирати тільки елементи певного типу. Для цього використовується селектор :nth-of-type()
, перед яким необхідно вказувати, який саме тег потрібно вибирати:
p:nth-of-type(2) { color: yellow; }
Код вище поміняє колір тексту для кожного тега <p>
, який є другим вкладеним елементом всередині свого батьківського елементу.
Як вибрати кожен третій елемент, починаючи з першого
li:nth-child(3n+1) { color: yellow; }
Формула an + b
описує цикл, де n
це лічильник позиції (починається з нуля), а b
— це початкова позиція циклу.
Як вибрати парні або непарні елементи
li:nth-child(odd) { color: yellow; }
li:nth-child(even) { color: yellow; }
Використовуйте odd
для вибору непарних і even
для парних елементів.
Вибрати перший або останній елемент
li:last-child { color: yellow; }
Замість last-child
можна використати first-child
для вибору першого елементу.
Вибрати елемент за рештою до кінця
За допомоги селектору nth-last-child(n)
ви можете легко вибирати передостанній елемент або будь-який інший, вказуючи, скільки залишилося елементів до останнього.
li:nth-last-child(2) { color: yellow; }
Підтримка браузерами
:nth-child(), :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Іконки зроблено в ArtUA.
Вот хорошие видеоуроки по HTML+CSS
Вводный курс так сказать – …
@Инокентий, ага, очень “актуальная” ссылка.
Приведенное решение отвалится в ИЕ старых версий.
Если обратить внимание на другие селекторы например тут –
http://only-css.com/blog/article/selektory-css3 Можно увидеть что выбирать можно не только так.
@CSS_Angel, чем больше люди пишут кастыли для старых версий IE, тем чаще нам ( разработчикам ) прийдется это делать. Я имею ввиду пусть менеджер не стелится под клиента а говорит : “Старые версии IE – это дополнительная цена, это время на разработку, это неактуально. Уже вышла 10-я винда и там стоит Эдж, который прекрасно все “понимает”… Давайте не будем это делать, поскольку это ваши деньги и время.”
Наверное я в чем то не прав и мне сейчас предоставят статистику использования версий браузеров… Но черт возьми! На дворе 2015-й год!
@Alex, да вообще всё правильно, пора забыть о старом ослике, как о страшном сне.
уже 18, а ещё ie поддерживаем
Спасибо, полезная информация.
Еще бы по :nth-of-type() примерчиков.
@Max, спасибо за идею, добавил :)
@Назар Токарь, Отлично, спасибо )