Selector for Even and Odd Level Children

nth odd/even child elements h3

<h3> is always the first child of <div class="col-sm-12">. Because the counting is zero base - first child = even, so the even rule that you defined applies to all <h3> elements.

To get what you ask, you need to find the nth child between the <div class="row row-venue"> items:

.row-venue:nth-child(odd) h3 {
    color: white;
}
.row-venue:nth-child(even) h3 {
    color: black;
}

If your divs are mixed with other elements, use :nth-of-type instead of :nth-child.

CSS: If class is odd/even, change margin

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>

Select last child when odd, 2 last childs when even

Here is one way...

.wrap div:last-child,.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {    color: red;}

<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div></div>
<hr>
<div class="wrap">    <div>Odd</div>    <div>Even</div>    <div>Odd</div>    <div>Even</div>    <div>Odd</div></div>

Use tr:nth-child(odd) and tr:nth-child(even) selectors only on nested top tables

If you change your foreach loop to a for loop like this:

for($i = 0; $i < count($results); $i++) {
    $result = $results[$i];
    ...

Then you can figure out if the current row is even or odd by testing if $i % 2 == 0. If that evaluates to true, then add an 'even' class; else add an 'odd' class.

---

Related Topics