Я немного побаловался с этим. Кажется, я не могу заставить классы работать над этим, может быть, кто-то, кто знает CSS лучше, чем я, может заставить его работать, но кажется, что у nth-of-type и last-child есть свои нюансы с тем, что вы пытаетесь сделать.
Кроме того, без использования классов вы можете рассчитывать на некоторый уровень различных элементов DOM. Надеюсь, этого достаточно для того, чтобы вы могли на это опираться или для кого-то еще, чтобы добавить к этому, но в любом случае это должно быть хорошим началом.
Когда вы удаляете элемент списка, чтобы было только 3, фоновый цвет будет синим для всех 3. Когда вы уменьшите до 2 литов, они исчезнут. 1, 4 или более экземпляров li, и они будут отображаться как обычно.
Так как nth-last-child ожидает, что аргумент будет last child , тогда, указав nth-last-child(2) или nth-last-child(3), вы ожидаете в точности 2 или 3 экземпляра элемент, так как это считает детей сзади вперед.
При объединении с: first-child мы ищем любой элемент, который является и вторым (или третьим) элементом с конца и первым элементом.
Если это условие выполнено, то это означает, что существует ровно 2 (или 3) экземпляра этого элемента.
Чтобы захватить все элементы между вами, используйте общий комбинатор (~)
Чтобы узнать больше информации об этом, вы можете посетить этот сайт [https://alistapart.com/article/quantity-queries-for-css/], который объясняет это немного глубже, но я привел основной пример этого ниже.
Надеюсь, это поможет!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
li:nth-last-child(2):first-child,
li:nth-last-child(2):first-child ~ li {
display: none;
}
li:nth-last-child(3):first-child,
li:nth-last-child(3):first-child ~ li {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>