title: nth-child(even) not applying to my css selectors
body: <p>I have a gallery container which has two columns. I append multiple photos to the container using jQuery. When I attempt to use nth-child(n) on the div container or img tags, nothing happens. I'm not too sure what I'm doing wrong.</p>
  
  <p>I've tried to use nth-of-type too, selecting image tags, div tags, adding classes and IDs trying to get it to access the elements, but I've failed each time. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="photos"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$( ".photos" ).append(`&lt;img class=\"diaryImage\" src=\"..url\"&gt;`);
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.photos {
   line-height: 0;
  -webkit-column-count: 2;
  -webkit-column-gap:   0px;
  -moz-column-count:    2;
  -moz-column-gap:      0px;
  column-count:         2;
  column-gap:           0px;
  
  margin-top:.5%;
  background-color: transparent;
  width: 80%;
  margin-left: 16%;
  height: auto;
  overflow: auto;
  
  }
  
  .photos img {
  width: 100% !important;
  height: auto !important;
  vertical-align: top;
  }
  
  .photos img:nth-child(even) {
  width: 10%;
  /*    grid-column:2;*/
  }
  </code></pre>
  
  <p>I have also tried:</p>
  
  <pre><code>div.photos img:nth-child(even) {
  width: 10%;
  /*    grid-column:2;*/
  }
  
  .photos:nth-child(even) {
  width: 10%;
  /*    grid-column:2;*/
  }
  </code></pre>
  
  <p>And a couple of other tags. I'm new to using nth child selectors so not 100% sure what I'm doing wrong.</p>
  
  <p>I just want any impact to be had on every second photo. Once I can see the selector working, I can continue working on the problem. My ultimate objective is to have every second photo placed into column 2, but just testing with width:10%; to see if the code is having any impact.</p>