Как показать только первые три изображения в списке с помощью css nth-child (-n + 3)

Question

В основном это новостная лента с 10 элементами в списке. Первые 3 статьи покажут изображение, связанное со статьей, и следующие записи должны скрывать изображения.

Я не хочу добавлять дополнительные правила в php для достижения этой цели. Я хочу сделать это с помощью CSS nth-child или аналогичного.

Это CSS

.container ul {
    list-style-type: none;
}

.articlePhoto {
    display: none;
}

.container li:nth-child(-n+3) {
    display: block;
}

Это HTML

<div class='container'>
    <ul>

        <li class='articleContainer'>
            <div class='articlePhoto'>
                <img
                    class='img-fluid rounded'
                    src='https://via.placeholder.com/350x150'
                    alt='Lorem ipsum'
                >
            </div>
            <div>
                <a
                    class='categoryList'
                    href='?ncid=1004&naid=10000&nacid=1000'
                    title='Lorem ipsum'
                >Lorem ipsum</a>
            </div>
            <div>
                Lorem ipsum
                <hr>
                 friday, 17 august, 2018
                <hr>
                Lorem ipsum, Lorem ipsum, Lorem ipsum
            </div>
        </li>

    </ul>
</div>

Этот CSS - последний, который я пробовал перед тем, как сдаться. Я пробовал много комбинаций, которые не делают то, что я хочу, и я не могу понять, почему это не работает. Эта текущая комбинация не показывает изображения вообще.

Другие, которые я попробовал без удачи: .container li :nth-child(-n+3) img, .container img:nth-child(-n+3), ul:nth-child(-n+3) img

и так далее, и так далее ..

Answer 1

Я не уверен насчет структуры, но если это что-то вроде этого?

<div class="container">
    <ul>
        <li class="articleContainer">
          <div class="articlePhoto"><img src.../></div>
          article 1 content...
        </li>
        <li class="articleContainer">
          <div class="articlePhoto"><img src.../></div>
          article 2 content...
        </li>
        <li class="articleContainer">
          <div class="articlePhoto"><img src.../></div>          
          article 3 content...
        </li>
        <li class="articleContainer">
          <div class="articlePhoto"><img src.../></div>          
          article 3 content...
        </li>
    </ul>
</div>

Вы могли бы использовать этот CSS 2, чтобы скрыть изображения для статей 4 +:

.container li + li + li + li .articlePhoto { display: none }

Или, если вы хотите использовать CSS 3: nth-child:

.container li:nth-child(n+4) .articlePhoto { display: none }

Answer 2

Этого можно добиться, используя общий селектор брата

.articleContainer:nth-child(3) ~ .articleContainer img {
   display: none;
}