CSS: If class is odd/even, change margin

Question

I'm trying to alternate the margin to make images go zig zagged up and down. I found this article that came close, but applied the one change to all .brochureImg classes. What am I doing wrong?

HTML

<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a>
            <li class="brochureImg first"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        </li>
    </ul>
</div>

CSS

.brochureImg {
    display: inline-block;
    margin: 0 auto;
    margin-top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg a img:nth-child(odd) {
    margin-top: -120px;
}

.brochureImg a img:nth-child(even) {
    margin-top: -60px;
}

.brochureImg.first {
    margin-left: 125px;
}

Answer 1

OK, so there were a few issues.

First, your html was badly formed, with nested <li> elements. See my example below for how I fixed it.

Second, your css attribute wasn't the one you wanted, I think. Instead of margin-top I think you need top. This means where you want your item placed with respect to your nearest parent of position: relative or position: absolute.

Third, you css nth-child selectors were wrong. The nth-child selector applies to the item which you put it on. The <img> tag is always the first child, so instead I inferred that you wanted it on your <li> tags.

Lastly, a minor convenience: there is also the :nth-child(2) selector that you can put in your css, so that you don't need to add a class first (probably not very good html class name) to your <li> element that you want to indent.

I think this is what you wanted

.brochureBrand {
    position: relative
}

.brochureImg {
    display: inline-block;
    top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg:nth-child(odd) {
    top: -120px;
}

.brochureImg:nth-child(even) {
    top: -60px;
}

.brochureImg:nth-child(2) {
    margin-left: 125px;
}

<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
    </ul>
</div>

Hope this helps!