:nth-child() | WebReference
Главная Вёрстка Структурные псевдоклассы :nth-child()
Псевдокласс :nth-child() позволяет выбрать элементы на основе их положения в группе братских элементов. В общем виде этот псевдокласс записывается следующим образом.
:nth-child(an ± b) { … }Вместо a и b подставляются конкретные целые числа, а n является счётчиком и остаётся в исходном виде. Числа a и b могут быть отрицательными или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.
Формулу an+b следует понимать так: выбрать каждый a элемент, начиная с b. К примеру, 2n+3 означает выбрать каждый второй элемент, начиная с третьего. Вместо n браузер самостоятельно подставляет числа, начиная с 0. Поэтому мы можем определить какие элементы будут выбраны, самостоятельно заменяя 
д. Таким образом, сперва выберется третий элемент (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. Колонки таблицы
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>:nth-child()</title> <style> table { width: 100%; } th, td { padding: 4px; } td:nth-child(even) { background: #c7c7c7; /* Цвет фона чётных ячеек */ } td:nth-child(odd) { background: #f0f0f0; /* Цвет фона нечётных ячеек */ } </style> </head> <body> <table> <thead> <tr> <th></th> <th>2023</th><th>2024</th><th>2025</th> </tr> </thead> <tbody> <tr> <td>Heфть</td> <td>43</td><td>51</td><td>79</td> </tr> <tr> <td>3oлoтo</td> <td>29</td><td>34</td><td>48</td> </tr> <tr> <td>Дерево</td> <td>38</td><td>57</td><td>36</td> </tr> </tbody> </table> </body> </html>
1.Рис. 1. Колонки таблицы
Следует помнить, что :nth-child() работает только для однотипных братских элементов, вроде <li>, <td>, <tr> и др. В нижеприведённом примере братскими (имеющими общего родителя) являются элементы <li>. При этом элементы <a> не являются братскими, так как у каждого из них собственный родитель.
<ul> <li><a>Ссылка</a></li> <li><a>Ссылка</a></li> <li><a>Ссылка</a></li> </ul>
В итоге селектор a:nth-child(2) для выбора второй ссылки не работает. Чтобы до неё добраться следует воспользоваться комбинированными селекторами. Обращаемся ко второму пункту списка <li>, а уже затем к ссылке <a>.
li:nth-child(2) > a { color: green; }См. также
- Нумерованные списки
- Псевдокласс :nth-child
- Псевдокласс :nth-last-child
- Псевдоклассы в CSS
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 12.
03.2020
Редакторы: Влад Мержевич
:first-of-type и :last-of-type
Ctrl+←
:nth-of-type()
Ctrl+→
html — CSS: как объединить несколько nth-of-type в один?
Задать вопрос
Вопрос задан
Изменён 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) {
background-color: red;
} <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
Как прописать селектор, который бы объединял все эти nth-of-type? (т.
е. начиная с 4-го далее каждый 3-й).
- html
- css
- nth-of-type
4
Всё очень просто…
div {
display: inline-block;
width: 150px;
height: 80px;
border: 1px solid black;
}
div:nth-child(n+4):nth-child(3n+1)
{
background-color: red;
}<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
1
Зарегистрируйтесь или войдите
Регистрация через GoogleРегистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Стилизация каждого 3-го и 4-го элемента
спросил
Изменено 4 года, 11 месяцев назад
Просмотрено 4к раз
У меня есть набор элементов, которые должны отображаться в виде карточек.
Каждый 3-й и 4-й пункт должен быть шире остальных (схема: узкий — узкий — широкий — широкий — узкий — узкий — широкий — широкий … и так далее). Что я пробовал до сих пор:
.card {
&:nth-ребенок(1n) {ширина: 33%;}
&:nth-ребенок(2n) {ширина: 33%;}
&:nth-child(3n) {ширина: 66%;}
&:nth-child(4n) {ширина: 66%;}
}
Конечно, это работает только для первых 4 предметов. Я хочу иметь возможность использовать это для бесконечного количества предметов.
Я не мог понять это ни с &:nth-child(3n) и тому подобное.
Можно ли решить это с помощью сетки CSS?
- HTML
- CSS
- CSS-селекторы
- CSS-сетка
5
Чтобы выбрать каждый 3-й и 4-й элемент, вы можете использовать 4n + 3 и 4n + 4 в селекторе nth-child .
раздел > раздел {
ширина: 50 пикселей;
отображение: встроенный блок;
высота: 50 пикселей;
граница: 1px сплошной черный;
}
div > div: n-й ребенок (4n + 3),
div > div: n-й ребенок (4n + 4) {
ширина: 100 пикселей;
} <дел> < div>
Таким образом, выделенные жирным шрифтом элементы ниже будут обозначать те, которые я хотел бы выбрать: