Как через определенные промежутки времени находить определенные элементы в списках
nth-child - это селектор, который соответствует каждому n-му дочернему элементу своего родителя. Допустим, вы хотите применить CSS только к определенному количеству p элементов. nth-child - это именно то, что вам нужно.
#nameContainer p {
color: black;
}
#nameContainer:hover p:nth-child(1) {
color: red;
}
Приведенный выше CSS изменит цвет только первого p, когда пользователь наводит курсор на nameContainer.
Другие параметры, которые можно передать nth-child
нечетный
Используя nth-child(odd), вы можете применить CSS к каждому нечетному дочернему элементу. Если бы вы переписали приведенный выше CSS, чтобы повлиять на каждый нечетный элемент, тег p для Келли, Стэнли, Майкла и т. Д. Стал бы красным.
даже
И наоборот, nth-child(even) применил бы CSS к Криду, Оскару, Джиму и т. Д.
формула (an + b)
Помимо того, что значение n может быть любым числом, вы также можете использовать формулу. nth-child(3n) повлияет на каждый третий дочерний элемент. nth-child(3n+1) будет применяться к каждому третьему элементу, начиная с первого. Умножение и деление не поддерживаются nth-child(n) формулами. Давайте разберем этот формат формулы и посмотрим, что каждая часть означает для nth-child.
a представляет размер цикла. Если a равно 3, это означает, что CSS применяется к каждому третьему элементу. См. Ниже для p:nth-child(3n).
n - это счетчик, используемый для определения того, какой из родственных элементов в группе затронут. Сам по себе он относится к каждому дочернему элементу. p:nth-child(n) будет выбирать каждые p. Это немного избыточно, так как вы можете просто использовать p отдельно.
b представляет значение смещения. Если вы посмотрите на предыдущий пример nth-child(3n+1), CSS будет применяться к каждому третьему элементу, изначально смещенному на единицу. Таким образом, для p:nth-child(3n + 1) будет затронут первый тег p, а затем каждый третий тег. См. ниже.
Вы также можете использовать вычитание. В nth-child(3n-1) цикл равен 3, а n - это счетчик, что означает, что будет затронут каждый третий тег p. Но когда смещение равно -1, что по существу равно 3n+(-1), вы должны начать свой цикл с одного элемента перед первым тегом p. См. ниже.
Теперь, когда вы понимаете шаблонный вариант для nth-child, давайте посмотрим на обратную операцию, отрицательный дочерний диапазон.
Отрицательный дочерний диапазон
Отрицательный дочерний диапазон полезен, когда вы хотите добиться того же, что и при использовании формульного nth-child, но в обратном порядке. Вы просто ставите знак минус перед формулой nth-child. См. ниже.
p:nth-child(-2n+5){
color: red;
}
Учитывая наш список символов «Office», этот nth-child отрицательный диапазон будет применять CSS к именам, начиная с Michael, поскольку это пятое имя в списке, а затем работать в обратном направлении, выбирая каждое второе имя. Приведенный выше CSS сделает Майкла, Стэнли и Келли красными. Этот выбор отрицательного диапазона работает аналогично n-му выделению для дочерних элементов, называемых nth-last-child(n).
Комбинированные детские диапазоны
С комбинированными дочерними диапазонами вы можете применить несколько nth-child селекторов к одной группе братьев и сестер. Допустим, вы хотите получить все дочерние элементы между первым и пятым. Вы можете сделать это, написав комбинированный nth-child выбор. См. ниже.
p:nth-child(n+5):nth-child(-n+10){
color: red;
}
Здесь мы объединили два nth-child селектора, чтобы захватить все теги p между пятым и десятым тегами. Первый селектор захватит все теги p, начиная с пятого, Michael, поскольку 5 - это смещение. Затем мы добавляем отрицательный дочерний диапазон, чтобы работать в обратном направлении от десятого, Дуайта. Вышеупомянутое сделало бы имена от Майкла до Дуайта красным включительно. Записав отрицательный дочерний диапазон в этом формате, вы можете воспроизвести то же поведение, что и другой дочерний селектор nth-last-child.
nth-последний-ребенок (n)
nth-last-child(n) работает так же, как nth-child(n), только начинается с конца группы братьев и сестер, а не с начала. nth-last-child(n) может принимать те же параметры, что и выше (четный, нечетный, формула); он просто выполняет их в обратном порядке. Возьмите вариант формулы, который мы использовали раньше, nth-child(3n-1). Если бы мы написали nth-last-child(3n-1), приложение CSS началось бы с тега p перед Бобом, а затем продолжило бы его до каждых трех братьев и сестер в обратном порядке. Затронутые имена будут Тоби, Энди, Пэм и так далее. Помимо выбора конкретных p тегов в зависимости от их дочерних элементов, вы также можете выбрать их по отношению к другим элементам с помощью nth-of-type(n).
n-й тип (n)
Этот дочерний селектор будет выбирать дочерние элементы в зависимости от типа. Предположим, у нас есть два тега div, каждый из которых содержит восемь имен символов. Мы хотим дать имена в обоих тегах div, придав им более крупный шрифт. Мы можем написать что-то вроде кода ниже.
p:nth-of-type(1){
font-size: 50px;
}
Это сделало бы Келли и Пэм больше, чем остальные имена. Допустим, вы хотите сделать обратное и показать худшее из каждой группы в виде более крупного текста; вы можете использовать nth-last-of-type(n). Он работает так же, как селектор nth-last-child(n), начиная с конца каждой группы в каждом div.
заявка
Один из вариантов использования nth-child - это когда вы хотите подчеркнуть разницу в следующих друг за другом строках в таблице. См. Этот пример в W3 Schools.
Другой вариант использования может заключаться в выделении диапазона. Предположим, вы составляете список игроков и их рекорды для видеоигры, чтобы показать, что MADMAX и DUSTIN входят в пятерку лучших для Dig Dug.
Мы можем применить комбинированный nth-child и отрицательный диапазон, чтобы каждый мог видеть первую четверку более заметно, чем остальные.
p:nth-child(n):nth-child(-n+4){
animation: pulsate 0.5s ease-in-out;
}
@keyframes pulsate{
0% {
transform: scale(1);
} 50% {
transform: scale(1.1);
} 100% {
transform: scale(1);
}
}
Вышеупомянутое будет выглядеть примерно так.
nth-child также полезен для синхронизированной CSS-анимации с использованием animation-delay. См. Приведенный ниже код, в котором используется миксин-цикл в LESS.
@iterations: 15;
.mixin-loop (@i) when (@i > 0) {
&:nth-child(@{i}) {
animation-delay: @i * 0.2s;
}
.mixin-loop(@i - 1);
}
p{
animation: ScaleIn 0.5s linear;
animation-fill-mode: both;
transform-origin: bottom left;
.mixin-loop(@iterations);
}
Ниже показано, как будет выглядеть анимация без задержки анимации.
А вот как это будет выглядеть с задержкой.
Чтобы узнать о других nth-child случаях использования, ознакомьтесь с этими трюками с CSS.
Обновите бесплатную подписку на Medium до платной здесь, и всего за 5 долларов в месяц вы получите неограниченное количество рассказов без рекламы от тысяч авторов из самых разных публикаций. Это партнерская ссылка, и часть вашего членства помогает мне получать вознаграждение за контент, который я создаю. Спасибо!
