Нацельтесь на каждый элемент, который является nth-child

В этой статье мы поговорим о nth-child, который используется для выбора n-го дочернего элемента его родителя.

Исходный код:



Курс CSS
Каскадные таблицы стилей, также известные как CSS, являются одной из важных технологий Всемирной паутины (WWW). CSS — это…www.udemy.com



Например, у нас есть ряд ‹div› внутри страницы.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
<div>item7</div>
<div>item8</div>
</body>
</html>

n-й ребенок («число»)

Если мы хотим выбрать 1-й и 6-й дочерние элементы его родителя и добавить красный цвет фона.

Мы можем сказать

div:nth-child(3),div:nth-child(6){
background-color: red;
}

n-й ребенок (нечетный/четный)

Мы можем добавить стиль к четной строке, сказав

div:nth-child(even){
font-size: 30px;
}

Мы видим, что текст в четной строке больше.

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

Пользовательский номер

Мы можем поместить формулу в скобку, чтобы она не ограничивалась выбором четного или нечетного.

Например, в этом случае мы помещаем в селектор 5n+1. Затем он выберет 5(0)+1=1, 5(1)+1=6, … и так далее.

div:nth-child(5n+1){
background-color: green;
}

Таким образом, 1-й и 6-й ряды будут окрашены в зеленый цвет фона.

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.