Как выбрать нужные элементы с помощью hth-child?

Question

Подскажите, как правильно задать стили 5 и 6 элементу, чтобы стили применялись на все 5 и 6 элементы. Пробую сделать, но что-то не получается, стили задаются лишь единожды на 5-6 блок, а дальше не распространяются.Нужно чтобы ко всем 5-6 применялись стили.

.block {
display: flex;
flex-wrap: wrap;
}
.item {
width: 3rem;
height: 2rem;
border: 2px solid green;
background: #eee;
margin: 3px;
}

.item:nth-child(n+4):nth-child(-n+5) {
border: 2px solid red;
background: grey;
}

<div class="block">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
  <div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

Answer 1

.block {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 3rem;
  height: 2rem;
  border: 2px solid green;
  background: #eee;
  margin: 3px;
}

.item:nth-child(4n),
.item:nth-child(5n) {
  border: 2px solid red;
  background: grey;
}

<div class="block">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

Как выбрать нужные элементы с помощью hth-child?

Ответы (1 шт):