css nth child :after - flip image horizontally - css

Question

I'm trying to take an :after element, which is an image frame and flip the second one in a group of 3 horizontally.
Here's my current css:
.photo-frame {
position: relative;
width: 354px;
height: 244px;
}
.photo-frame:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 354px;
height: 244px;
background: url(images/photo-frame.png) no-repeat 0 0;
}
.photo-frame img {
display: block;
margin: 0 auto;
}
.photo-frame:nth-child(2):after {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
HTML:
<div class="shell">
<div class="section-body">
<ul>
<li>
<a href="#">
<div class="photo-frame">
<img width="354" height="244" src="/uploads/2014/10/dierks-354x244.jpg" class="attachment-photo-image" alt="dierks" />
</div><!-- /.photo-frame -->
</a>
<div class="top-section-img-title">
<strong>
ARTIST NAME
</strong>
</div>
</li>
<li>
<a href="#">
<div class="photo-frame">
<img width="354" height="244" src="/uploads/2014/10/carrie-354x244.jpg" class="attachment-photo-image" alt="carrie" />
</div><!-- /.photo-frame -->
</a>
<div class="top-section-img-title">
<strong>
ARTIST NAME
</strong>
</div>
</li>
<li>
<a href="#">
<div class="photo-frame">
<img width="354" height="244" src="/uploads/2014/10/luke-354x244.jpg" class="attachment-photo-image" alt="luke" />
</div><!-- /.photo-frame -->
</a>
<div class="top-section-img-title">
<strong>
ARTIST NAME
</strong>
</div>
</li>
</ul>
<div class="more">
VIEW FULL LINEUP HERE
</div><!-- /.more -->
</div><!-- /.section-body -->
</div><!-- /.shell -->
It's not working however.
I'm fairly new to this nth child selector magic. Can you guys give me a hand?

Answer 1

The problem is that .photo-frame is an only child within each li so your selector does not match anything. You should also know that :nth-child() only selects elements not classes or ID's like how you're currently trying.
Because the li's are children elements, and ancestors of each .photo-frame, I suggest targeting them with :nth-child() instead to select the .photo-frame you want to style:
li:nth-child(2) .photo-frame:after {
/* ... */
}