title: How to show only first three images in list with css nth-child(-n+3)
body: <p>Basicly this is a news feed with 10 items in a list. First 3 articles will show an image associated with the article and the following entries should hide the images.</p>
  
  <p>I do not wish to put extra rules in the php to achieve this. I want to do it with CSS <code>nth-child</code> or similar.</p>
  
  <p>This is the <code>CSS</code></p>
  
  <pre><code>.container ul {
      list-style-type: none;
  }
  
  .articlePhoto {
      display: none;
  }
  
  .container li:nth-child(-n+3) {
      display: block;
  }
  </code></pre>
  
  <p>This is the <code>HTML</code></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;ul&gt;
  
          &lt;li class='articleContainer'&gt;
              &lt;div class='articlePhoto'&gt;
                  &lt;img
                      class='img-fluid rounded'
                      src='https://via.placeholder.com/350x150'
                      alt='Lorem ipsum'
                  &gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a
                      class='categoryList'
                      href='?ncid=1004&amp;naid=10000&amp;nacid=1000'
                      title='Lorem ipsum'
                  &gt;Lorem ipsum&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  Lorem ipsum
                  &lt;hr&gt;
                   friday, 17 august, 2018
                  &lt;hr&gt;
                  Lorem ipsum, Lorem ipsum, Lorem ipsum
              &lt;/div&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This CSS is just the last one I tried before I gave up. I have tried lots of combinations that does not do what I want and I can't figure out why it does not work. This current combination show no pictures at all.</p>
  
  <p>Others I've tried with no luck:
  <code>.container li :nth-child(-n+3) img</code>,
  <code>.container img:nth-child(-n+3)</code>,
  <code>ul:nth-child(-n+3) img</code></p>
  
  <p>and on and on and on..</p>