An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image.
<section id="main-content" class="photo-grid">
<h2>Photos</h2>
<div class="col-1-4">
<a href="#">
<p>File 503</p>
<img src="#" />
</a>
</div>
<div class="col-1-4">
<a href="#">
<p>File 508</p>
<img src="#" />
</a>
</div>
<div class="col-1-4">
<a href="#">
<p>File 505</p>
<img src="#" />
</a>
</div>
<div class="col-1-4">
<a href="#">
<p>File 525</p>
<img src="#" />
</a>
</div>
<br clear="all" />
</section>
The goal is to apply different CSS properties to each .col-1-4 element using :nth-child(). Attempting selectors like #main-content:nth-child(n) and .photo-grid:nth-child(n) have not been successful in achieving this customization.