Выбор определённого дочернего элемента в CSS: nth-child()

Быстрый ответ

Если вы хотите выделить n-й потомок в списке, вы можете использовать CSS :nth-child(n):

ul li:nth-child(3) {
  /* Подсветит третий элемент <li>, словно это — вечеринка 🎉 */
}

Если необходимо сослаться на конкретный тег, используйте :nth-of-type(n):

p:nth-of-type(3) {
  /* Третий параграф <p> будет особенно заметен 🌟 */
}

Обратите внимание: 1 является первым индексом в этой системе отсчёта.

Если вы работаете с динамическими таблицами, то вам помогут JavaScript или jQuery для добавления динамических стилей.

От статического к динамическому: общение с изменяющимся контентом

Если динамически генерируемые элементы меняют вашу HTML-структуру, примените методы CSS, jQuery и JavaScript:

find() в jQuery: ваш навигатор в поиске

$('table').find('td:nth-child(2)').addClass('highlight');

• Эта команда выделяет второй td в каждом ряду таблицы классом 'highlight'. Идеально подходит для обработки динамического контента.

Подробнее об этом расскажет наш спикер на видео

Добавление классов к свежесозданным элементам: лучше поздно, чем никогда

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

$('<td class="dynamic-content">').appendTo('tr');

Теперь dynamic-content готов красоваться вашими стилями.

Когда :nth-child не под рукой: комбинирование селекторов и :first-child

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

td:first-child + td { /* Второй td станет звездой стилевого шоу! */ }

Совместимость — это необходимость

• Для оптимальной совместимости используйте jQuery в сочетании с CSS.
• Для работы с устаревшими браузерами прибегайте к помощи JavaScript.
• Проверьте таблицы поддержки на сайте "Can I use" чтобы быть в курсе.

JavaScript для точной и универсальной стилизации

document.querySelectorAll('td:nth-child(2)').forEach(td => {
  td.style.backgroundColor = 'blue';
});

Этот JavaScript код окрашивает второй td в каждом ряду таблицы так же, как это бы сделал CSS, но с лучшей кроссбраузерной совместимостью.

Визуализация

Допустим, мы представляем группу пингвинов 🐧 на льду как конкретные дочерние элементы в CSS:

Льдина (🧊): [🐧, 🐧, 🐧, 🐧, 🐧]

Третий пингвин — это наш третий дочерний элемент (3-й <div> или <li>):

.ice-floe > :nth-child(3) {
  /* Облачит третьего пингвина в стиль 🐧 на плоту 🧊 */
}

В результате третий пингвин получит новый аксессуар:

🧊: [🐧, 🐧, 🎀🐧, 🐧, 🐧]

С помощью CSS Nth-Child можно детально настраивать различия между элементами 🎯.

Уголок по устранению неполадок: как справляться с трудностями

Динамический контент

Динамический контент изменяет ваш HTML, что делает использование только CSS менее эффективным. В такой ситуации выберите JavaScript или jQuery для более точного контроля над элементами.

Сочетание старого и нового

Начните с базового CSS и добавьте JavaScript там, где браузер этого требует. Это подход по принципу постепенного улучшения.

Проблемы с таблицами

При стилизации конкретных колонок в таблицах помните, что :nth-child рассматривает все строки как единое целое.

Вопросы специфичности

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

Полезные материалы

1. CSS :nth-child() Селектор – W3Schools — понятное руководство по :nth-child.
2. :nth-child() – CSS | MDN — энциклопедическая информация MDN о :nth-child().
3. :nth Tester – CSS Tricks — место для тестирования :nth-child.
4. html – Как и зачем использовать display: table-cell (CSS) – Stack Overflow — обсуждение применения CSS на Stack Overflow.
5. Can I use... Support tables for HTML5, CSS3, etc — проверьте совместимость CSS селекторов в разных браузерах.
6. Как укротить продвинутые селекторы CSS — Smashing Magazine — руководство по использованию продвинутых CSS селекторов.
7. :nth-child | CSS-Tricks – CSS-Tricks — детальный разбор :nth-child.
8. :nth-child() | Codrops — Codrops, ресурс с подробным описанием :nth-child().