CSS от А до Я: как использовать CSS селектор nth-child

CSS от А до Я: как использовать CSS селектор nth-child

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

N значит nth-child

В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.
Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке. В этом уроке мы узнаем, когда лучше использовать nth-child, а когда лучше обойтись обычным классом.

Когда нужно использовать nth-child?

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

Во-первых, все селекторы типа nth-child поддерживаются только в IE9 и выше (исключение :first-child). То есть первым делом необходимо определиться с диапазоном браузеров, с которыми вы будете работать. Если вам придется работать с IE8, вы можете использовать обычные классы или :first-child.

Совет 1: если вы поддерживаете IE8, используйте :first-child

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

Не нужно добавлять рамку справа и затем удалять ее на последнем элементе. Лучше добавьте рамку слева и удалите ее у первого элемента.

.site-nav li {
  border-left: 2px solid grey;
}
.site-nav li:first-child {
  border: 0;
}

Так же можно поступить и для верхних и нижних рамок. Если же вам посчастливилось не поддерживать IE8, читайте дальше…

Совет 2: используйте вместо классов :first-child и :last-child

Если вы создаете или используете готовую сетку, и вам нужно сделать что-то с первой и последней ячейками в ряду, воспользуйтесь псевдоклассами :first-child и :last-child вместо классов типа .first и .last в HTML.

Так ваш HTML код будет выглядеть чище, и вам не придется слишком много думать во время разработки макета. Иногда макеты бывают очень сложными. Чем меньше вам нужно думать над ним, тем лучше.

Совет 3: используйте nth-child для альтернативных стилей

Классический пример альтернативных стилей – разный фон для четных и нечетных строк в таблице. Еще один пример – обтекание четных и нечетных блоков контента по левому и правому краю на странице или в контейнере (нить комментариев или диалог).

В таких случаях я использую :nth-child(odd) и :nth-child(even). Чтобы не засорять код, пропишите первое состояние без nth-child, после чего уже используйте nth-child с большей специфичностью для альтернативных стилей.

/* вот так */
.data-table tr {
  background: white;
}
.data-table tr:nth-child(even) {
  background: lightgrey;
}

/* а не так */
.data-table tr:nth-child(odd) {
  background: white;
}
.data-table tr:nth-child(even) {
  background: lightgrey;
}

Совет 4: избегайте странных и сложных выражений с nth-child

Для более сложных выборок на странице я предпочитаю прописывать классы напрямую в HTML, а не работать с запутанными выражениями nth-child.

Выражения типа li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) слишком сложны для понимания. Понятия не имею, что они значат, но они работают!

К сожалению, в некоторых сложных дизайнах без таких выражений не обойтись. Но представьте, что вы вернетесь к коду через пару месяцев и попытаетесь понять, что вы хотели сделать. Даже у опытных экспертов по CSS на это уйдет довольно много времени!

Совет 5: используйте nth-child, когда не можете контролировать HTML

Может прозвучать странно. И действительно, мы, как разработчики и дизайнеры, должны контролировать HTML. Это наша главная задача. Но тут я говорю о системах управления контентом.

При создании шаблона для сайта на CMS у вас будет возможность контролировать HTML структуру и создавать классы и атрибуты. Однако иногда в ваших шаблонах будут такие места, куда будет вставляться контент из текстовых полей или областей из самой CMS. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.

В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree