Problem with Odd/Even Child Elements in Nth-Child

Problem with odd/even child elements in nth-child

Use nth-of-type instead:

Live Demo

div.section
{
    border: 1px solid black;
}
div.section div:nth-of-type(even)
{
    color: Green;
}
div.section div:nth-of-type(odd)
{
    color: Red;
}

nth-child(even/odd) not working and border-collapse issue

Your code is working is just that you are styling directly td elements instead use even and odd on tr and then style there child elements which are here td #triangle.

.top10  table  tr:nth-child(odd)  #triangle2{
................
................
................
}
.top10  table  tr:nth-child(even)  #triangle2{
................
................
................
}

border-collapse : collapse - Collapse table border into single-border.

.top10 table td:nth-child(2){    width:50vw;}.top10 table td:nth-child(3){    width:10vw;}.top10 table{    font-size: 28px;    font-weight: 400;    color:black;}.top10 table tr:nth-child(odd){    background-color: #636368;}.top10 table tr:nth-child(even){    background-color: #c4cad5;}
.top10  table  tr:nth-child(odd)  #triangle2{  background-color:#fff;  width: 0;   height: 0;   border-top: 25px solid transparent;  border-bottom: 25px solid transparent;  border-left: 120px solid blue;}.top10  table  tr:nth-child(even)  #triangle2{    background-color:#fff;    width: 0;   height: 0;   border-top: 25px solid transparent;  border-bottom: 25px solid transparent;  border-left: 120px solid red;}

<div class="top10 center"> <div class="headerBox"> <h2>RANKING TOP 10</h2> </div><table><tr><td>1.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td></tr><tr><td>2.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td></tr><tr><td>3.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>             </tr>                    <tr><td>4.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>5.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>6.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>7.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>8.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>9.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                    <tr><td>10.</td> <td><a>Lorem Ipsum</a></td> <td><strong>8,74</strong></td>> <td>5 126 głosów</td> <td id="triangle2"></td>                    </tr>                </table>

Select odd even child excluding the hidden child

Pseudo-selectors don't stack, so your :not doesn't affect the :nth-child (nor would it affect :nth-of-type etc.

If you can resort to jQuery, you can use the :visible pseudo-selector there, although that's not a part of the CSS spec.

If you're generating the HTML and can change that, you can apply odd/even with logic at run-time, eg in PHP:

foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}

Even trying to do something tricky like

.box[class='box']:nth-of-type(even)

doesn't work, because the psuedo-selector doesn't even stack onto the attribute selector.

I'm not sure there's any way to do this purely with CSS - I can't think of any right now.

:nth-child(even/odd) not working with acf

As per the specs, "The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings." (read a good refresher about the nth-child rule here). Here your CSS rule translates to "for every col-md-5 element that is an ODD child of a .tour-row div, make it float left" or another way to put it, "in a tour-row div, make every odd col-md-element float left." But that's not what you want to do (from what I understand of your question). You want "for every odd ROW, make the col-md-5 float left." To do that based on the way you've structured your HTML, you'll want a rule like this:

.wrapper:nth-child(odd) .col-md-5 {
    float: left ;
}

And to make your even rows float right, you just do this:

.wrapper:nth-child(even) .col-md-5 {
    float: right ;
}

To simplify things even more, you can just do this CSS:

.wrapper .col-md-5 {
    float: right ;
}

.wrapper:nth-child(odd) .col-md-5 {
    float: left;
}

Hope that helps!

---

Related Topics