Как правильно использовать nth-child?

Frontend developer HTML / CSS
1

Всем доброго времени суток, пытаюсь сделать что бы не отображались блоки с 4 (включительно) до конца, код внизу так как тут всё не отправляется:

2

.show_container:nth-child(n 4) {
display: none;
}

<div class="show_container">
<div class="show">1
<div class="show">2
<div class="show">3
<div class="show">4
<div class="show">5
<div class="show">6

Почему не работает display:none? Что я написал не так и как исправить??)

3

Ну я думаю нужно в стилях дописать перед nth-child(n 4) уточнение .show:nth-child(n 4), в общем я написал вот так:

.show {
background-color: #4CAF50;
border: 1px solid black;
border-radius: 2px;
}
.show_container .show:nth-child(n 4) {
display: none;
}

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

<div class="show_container">
<div class="show">1
<div class="show">2
<div class="show">3
<div class="show">4
<div class="show">5
<div class="show">6