CSS even nth-child nested img issue - html

Question

I am attempting to use the :nth-child(even) technique to select my images in every other article/item I have on my page and ultimately float the images within the even articles tot he opposite side of the others.
I am using Joomla 3 with K2 which I know won't make a difference as such but will explain the bloated HTML and lots of div's all nested within each other.
Here are my code snippets:
HTML(snippet of 2 articles/items):
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of A Little Bit About Us...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/51-a-little-bit-about-us" title="Copy of A Little Bit About Us...">
<img src="/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_L.jpg" alt="Copy of A Little Bit About Us..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Experience, business continuity, quality support</h3>
<p>Our team at CNi Solutions has over 18 years’ IT experience with a proven track record of success supporting small and medium sized businesses across the North West acting as a client’s IT department, or supplementing an existing IT function.</p>
<p>We believe in helping our clients to improve business performance by leveraging well managed IT solutions, backed up by expert IT support services providing highly technical installation, virtualisation and disaster recovery solutions leading to improved technical performances.</p>
<p>Our aim at CNi Solutions is to create long-term partnerships with our clients, maintaining value for money solutions through a combination of high quality support, expert IT project delivery and applicable strategic advice.</p> </div>
<div class="clr"></div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
<div class="clr"></div>
<!-- Plugins: AfterDisplay -->
<!-- K2 Plugins: K2AfterDisplay -->
<div class="clr"></div>
</div>
<!-- End K2 Item Layout -->
</div>
<div class="clr"></div>
<div class="itemContainer itemContainerLast" style="width:100.0%;">
<link rel="stylesheet" href="/templates/cni_solutions_purity_iii/html/com_k2/templates/about/about_style.css" type="text/css" />
<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">
<!-- Plugins: BeforeDisplay -->
<!-- K2 Plugins: K2BeforeDisplay -->
<div class="catItemHeader">
<!-- Item title -->
<h3 class="catItemTitle">
Copy of Here to Support You...
</h3>
</div>
<!-- Plugins: AfterDisplayTitle -->
<!-- K2 Plugins: K2AfterDisplayTitle -->
<div class="catItemBody">
<!-- Plugins: BeforeDisplayContent -->
<!-- K2 Plugins: K2BeforeDisplayContent -->
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/about/cni-solutions-overview/50-here-to-support-you" title="Copy of Here to Support You...">
<img src="/media/k2/items/cache/a522a6005d1cb428ea34ef1769cd7452_L.jpg" alt="Copy of Here to Support You..." style="width:600px; height:auto;" />
</a>
</span>
</div>
<!-- Item introtext -->
<div class="catItemIntroText">
<h3>Supporting your Computer Network Infrastructure</h3>
<p>At CNi Solutions we believe that your Computer Network Infrastructure should be at the very heart of your business, but should not dictate the beat. CNi Solutions has been developed to provide you with full IT support, allowing you to focus on what is important - Developing and growing your business without the interruptions of an unsupported IT Infrastructure.</p>
<p>We understand that your Computer Network Infrastructure needs to be tailored to suit your needs, whether you are a start-up business with one computer, looking for someone to call offering support and advice on your anti-virus and backup needs or a large company with more than one office looking for daily support and guidance on your growing IT demands.</p> </div>
<div class="clr"></div>
<!-- Plugins: AfterDisplayContent -->
<!-- K2 Plugins: K2AfterDisplayContent -->
<div class="clr"></div>
</div>
And so on for each article/item....
CSS:
.catItemBody img {
float: right;
width: 35%;
max-width: 400px;
}
.catItemBody:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}
I can target the img tags using the css above as it is appearing in the element inspector, but it appears to select all the images, not just those in the even articles/items that I want.
Any ideas on where I am going wrong?
The site page is currently situated here during development: http://www.themanofice.co.uk/index.php/about/cni-solutions-overview

Answer 1

Everyone of your .catItemBodys is even:
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even */
</div>
<div class="catItemView groupLeading">
<div class="catItemHeader"></div> /* This one is odd */
<div class="catItemBody"></div> /* This one is even, again */
</div>
Because the nth-child is calculated from the closest ascendant, not from the document as a whole.
You will have to make the selector "uglier":
.itemContainer:nth-of-type(even) .catItemBody img {}
Unless there will be no other images, then you could just use
.itemContainer:nth-of-type(even) img {}
I'm using nth-of-type instead of nth-child, just because you have clearing divs, so every .itemContainer is odd, actually.
Or you could create a new class for even items.

Answer 2

You are using the nth-child incorrectly to target alternate images. Your styling would only apply to alternate images if all .catItemBody elements were within the same parent.
But since they are nested within .itemContainer, the styles are not getting applied.
Try changing your css styles to:
.itemContainer img {
float: right;
width: 35%;
max-width: 400px;
}
.itemContainer:nth-child(even) img {
float: left;
width: 35%;
max-width: 400px;
}