Выберите каждый третий элемент в CSS
Я добавил нижнее и правое margin для каждого div (я нацеливаю divs, которые находятся непосредственно внутри li элементов. Теперь мне нужно удалить margin из каждого третьего элемента div . (3-й, 6-й и 9-й и т.д.). Это мой CSS но он не работает для меня.
li > div < margin-right: 10px; margin-bottom: 10px; border: 1px solid #dedede; padding: 10px; >li > div:nth-of-type(3n)
ПРИМЕЧАНИЕ. Я также пробовал :nth-child селектор :nth-child . но не повезло. Надеюсь, кто-то мне поможет. Спасибо.
TNK 20 сен. 2014, в 08:12
Поделиться
Название сбивает с толку, что побудило меня закрыть этот вопрос как своего рода дубликат стиля каждого третьего элемента? ,
Css каждый третий: :nth-child() | WebReference
Псевдокласс :nth-child() позволяет выбрать элементы на основе их положения в группе братских элементов. В общем виде этот псевдокласс записывается следующим образом.
:nth-child(an ± b)
Вместо a и b подставляются конкретные целые числа, а n является счётчиком и остаётся в исходном виде. Числа a и b могут быть отрицательными или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.
Формулу an+b следует понимать так: выбрать каждый a элемент, начиная с b. К примеру, 2n+3 означает выбрать каждый второй элемент, начиная с третьего. Вместо n браузер самостоятельно подставляет числа, начиная с 0. Поэтому мы можем определить какие элементы будут выбраны, самостоятельно заменяя n числами 0, 1, 2 и т. д. Таким образом, сперва выберется третий элемент (2×0+3=3), затем пятый (2×1+3=5), седьмой (2×2+3=7) и так до самого конца. Элементы с нулевым или отрицательным индексом игнорируются, поскольку таких элементов не существует.
Счётчик n начинается с 0.
Приведём несколько типовых комбинаций.
:nth-child(3)
Выбрать только третий элемент.
:nth-child(1)
Выбрать первый элемент. Идентично использованию :first-child.
:nth-child(n+3)
Выбрать все элементы, начиная с третьего; другими словами, все элементы, кроме первых двух.
:nth-child(2n)
Выбрать все чётные элементы. Вместо 2n можно использовать ключевое слово even — :nth-child(even).
:nth-child(2n+1)
Выбрать все нечётные элементы. Вместо формулы можно использовать ключевое слово
odd — :nth-child(odd).
:nth-child(-n+3)
Выбрать только первые три элемента.
:nth-child(3n)
Выбрать каждый третий элемент.
:nth-child(3n+2)
Выбрать каждый третий элемент, начиная со второго.
:nth-child(n+2):nth-child(-n+4)
Выбрать все элементы со второго по четвёртый.
В примере 1 показано выделение чётных колонок таблицы другим цветом. Такое чередование цветных полос облегчает восприятие таблицы и позволяет проще находить данные, расположенные в одной колонке.
Пример 1. Колонки таблицы
| 2023 | 2024 | 2025 | |
|---|---|---|---|
| Heфть | 43 | 51 | 79 |
| 3oлoтo | 29 | 34 | 48 |
| Дерево | 38 | 57 | 36 |
Результат данного примера показан на рис.
Рис. 1. Колонки таблицы
li:nth-child(2) > a
См. также
- Нумерованные списки
- Псевдокласс :nth-child
- Псевдокласс :nth-last-child
- Псевдоклассы в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 12. 03.2020
Редакторы: Влад Мержевич
:first-of-type и :last-of-type
Ctrl + ←
html — CSS: как объединить несколько nth-of-type в один?
Вопрос задан 4 года 10 месяцев назад
Изменён 4 года 10 месяцев назад
Просмотрен 232 раза
Сейчас на сайте работает следующая конструкция:
div < display: inline-block; width: 150px; height: 80px; border: 1px solid black; >div:nth-of-type(4), div:nth-of-type(7), div:nth-of-type(10), div:nth-of-type(13), div:nth-of-type(16), div:nth-of-type(19)
Как прописать селектор, который бы объединял все эти nth-of-type? (т. е. начиная с 4-го далее каждый 3-й).
Всё очень просто…
div < display: inline-block; width: 150px; height: 80px; border: 1px solid black; >div:nth-child(n+4):nth-child(3n+1)
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Стилизация каждого 3-го и 4-го элемента
спросил 4 года 11 месяцев назад
Изменено 4 года, 11 месяцев назад
Просмотрено 4к раз
У меня есть набор элементов, которые должны отображаться в виде карточек. Каждый 3-й и 4-й пункт должен быть шире остальных (схема: узкий — узкий — широкий — широкий — узкий — узкий — широкий — широкий … и так далее). Что я пробовал до сих пор:
.card < &:nth-ребенок(1n) &:nth-ребенок(2n) &:nth-child(3n) &:nth-child(4n) >
Конечно, это работает только для первых 4 предметов. Я хочу иметь возможность использовать это для бесконечного количества предметов. Я не мог понять это ни с &:nth-child(3n) и тому подобное.
Можно ли решить это с помощью сетки CSS?
Чтобы выбрать каждый 3-й и 4-й элемент, вы можете использовать 4n + 3 и 4n + 4 в селекторе nth-child .
раздел > раздел < ширина: 50 пикселей; отображение: встроенный блок; высота: 50 пикселей; граница: 1px сплошной черный; >div > div: n-й ребенок (4n + 3), div > div: n-й ребенок (4n + 4)
Чтобы выбрать каждый 3-й и 4-й элемент, вы можете использовать 3n + 3 и 4n + 4 в селекторе nth-child.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Требуется, но никогда не отображается
Опубликовать как гость
Требуется, но не отображается
html — CSS nth-child: каждый 3-й элемент, начиная с 4-го
спросил 5 лет назад
Изменено 5 лет назад
Просмотрено 3к раз
пытаюсь выделить каждый 3-й раздел , но начиная с четвертого. Таким образом, выделенные жирным шрифтом элементы ниже будут обозначать те, которые я хотел бы выбрать:
Я попробовал следующий код, но он не работает
section:nth-child(3n+1)
Если вы хотите начать с 4-го элемента, используйте +4 , а не +1
section:nth-child(3n+4)
Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел Раздел
Все, что вам нужно сделать, это:
section:nth-child (3n+4) вместо section:nth-child(3n+1)
section:nth- дочерний элемент (3n + 4) или section:nth-child(3n + 1):not(:first-child) .
:nth-child()
Псевдокласс :nth-child() позволяет выбрать элементы на основе их положения в группе братских элементов. В общем виде этот псевдокласс записывается следующим образом.
:nth-child(an ± b)
Вместо a и b подставляются конкретные целые числа, а n является счётчиком и остаётся в исходном виде. Числа a и b могут быть отрицательными или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.
Формулу an+b следует понимать так: выбрать каждый a элемент, начиная с b. К примеру, 2n+3 означает выбрать каждый второй элемент, начиная с третьего. Вместо n браузер самостоятельно подставляет числа, начиная с 0. Поэтому мы можем определить какие элементы будут выбраны, самостоятельно заменяя n числами 0, 1, 2 и т. д. Таким образом, сперва выберется третий элемент (2×0+3=3), затем пятый (2×1+3=5), седьмой (2×2+3=7) и так до самого конца. Элементы с нулевым или отрицательным индексом игнорируются, поскольку таких элементов не существует.
Счётчик n начинается с 0.
Приведём несколько типовых комбинаций.
:nth-child(3)Выбрать только третий элемент.
:nth-child(1)Выбрать первый элемент. Идентично использованию :first-child.
:nth-child(n+3)Выбрать все элементы, начиная с третьего; другими словами, все элементы, кроме первых двух.
:nth-child(2n)Выбрать все чётные элементы. Вместо 2n можно использовать ключевое слово even — :nth-child(even) .
:nth-child(2n+1)Выбрать все нечётные элементы. Вместо формулы можно использовать ключевое слово odd — :nth-child(odd) .
:nth-child(-n+3)Выбрать только первые три элемента.
:nth-child(3n)Выбрать каждый третий элемент.
:nth-child(3n+2)Выбрать каждый третий элемент, начиная со второго.
:nth-child(n+2):nth-child(-n+4)Выбрать все элементы со второго по четвёртый.
В примере 1 показано выделение чётных колонок таблицы другим цветом. Такое чередование цветных полос облегчает восприятие таблицы и позволяет проще находить данные, расположенные в одной колонке.
Пример 1. Колонки таблицы
| 2023 | 2024 | 2025 | |
|---|---|---|---|
| Heфть | 43 | 51 | 79 |
| 3oлoтo | 29 | 34 | 48 |
| Дерево | 38 | 57 | 36 |
Результат данного примера показан на рис. 1.
Рис. 1. Колонки таблицы
li:nth-child(2) > a
Как правильно читать псевдо-элемент nth-child
Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) — это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.
1, 2, 3, 5, 7, .
even
2, 4, 6, 8, .
#778899
text-decoration: none;
.third li:nth-child(3n+2)
.fifth li:nth-child(5n+3)
.forth li:nth-child(4n+2)
Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).
.third li:nth-child(3n+2)
3 * 0 + 2 = 2 3 * 1 + 2 = 5 3 * 2 + 2 = 8 3 * 3 + 2 = 11 3 * 4 + 2 = 14 3 * 5 + 2 = 17 3 * 6 + 2 = 20 . То есть, как и говорилось выше — каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное — понять алгоритм вычисления в этом выражении.