Question

Basically, what I’m trying to create is a page of div tags, each has an image inside them and I’m trying to use CSS3’s nth-child to alternate the float of that specific image.
But for the life of me, I can’t get the nth-child to locate those images. Here is my code so far…

CSS

.featureBlock img:nth-of-type(even) {
    float: left;
}

.featureBlock img:nth-of-type(odd) {
    float: right;
}

This is the HTML of one of those div tags….

    <div class="featureBlock">

        <h1>Multisize Players</h1>

        <div class="featureHelpBlock"><a href="#">More help with this</a></div>

        <img src="http://office2.vzaar.com/images/features/ft_multisize_players.png">

        <span class="featureContent">
            <p>A variety of player sizes is important as we recognise the fact that no two videos or websites are ever the same and you will want something that suits your site&#8217;s look. So if you record your video in 4x3 (not widescreen) or 16x9 (widescreen) we have the range of player sizes to suit your exact needs.</p>

            <p>We encode the video at the time of uploading in the size that you choose so that the picture and sound quality is retained throughout. Users can choose from the following sizes:</p>
        </span> 
        <br style="clear:both"> 

    </div>

Hope this makes sense.

Answer 1

Assuming you have several elements with the class featureBlock inside the same parent element, you would want to do this instead:

.featureBlock:nth-of-type(even) img {
    float: left;
}

.featureBlock:nth-of-type(odd) img {
    float: right;
}

See it in action on jsFiddle: http://jsfiddle.net/PZWd6/

The SitePoint CSS reference says of nth-of-type:

This pseudo-class matches elements on
the basis of their positions within a
parent element’s list of child
elements of the same type.

You can read more about it at the sitepoint reference page:
http://reference.sitepoint.com/css/pseudoclass-nthoftype