CODEWITHSUNDEEP
css
wyc
wyc

Reputation: 55273

Why is this nth-child pseudo selector not working in the following table?

This is the CSS:

#signup .vedit tbody > tr.b_part3:nth-child(2) {
  background: red;
}

The HTML structure:

enter image description here

As you can see, I want to select the second .b_part tr element of the table.

But for some reason the CSS rule is not being applied.

What could be the problem?

Live site: http://www.chineselearnonline.com/amember/signup4.php

Upvotes: 0

Views: 317

Answers (2)

imgnx
imgnx

Reputation: 789

Use :eq() instead of :nth-child() https://api.jquery.com/eq-selector/

Upvotes: 0

Scott Sword
Scott Sword

Reputation: 4708

I know that @Musa teased out a solution to this problem, but I will add to that just to document in case others run into this issue.

As of right now you can't segment sections of siblings via classes AND use :nth-child().

    //Standard Use:
    ul li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

    // Attempted Use:
    ul li.scope:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li class="scope">One</li>
        <li class="scope">Two</li> <!-- Fails -->
        <li class="scope">Thre</li>
    </ul>

    // Optional Solution:
    ul.scope li:nth-child(2) {  
      color: #0cf;
    }

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>

    <ul class="scope">
        <li>One</li>
        <li>Two</li> <!-- Highlights Two -->
        <li>Three</li>
    </ul>

It appears that in order for the nth-child pseudo class to activate, it requires direct access to the element itself and not one of it's nodes. So for now the primary work around is to re-factor and take your scope up one level (or higher).

Upvotes: 1

Related Questions