csslistcss-selectors

How do you select the nth item in a list based on that item’s child's attributes using only CSS selectors


So if I have a list like this:

<ul>
 <li><button disabled/></li>
 <li><button disabled/></li>
 <li><button /></li>
 <li><button /></li>
 <li><button /></li>
</ul>

And the amount of disabled buttons is never known - but will always be consecutive and appear before the enabled buttons, how do I select the second enabled button?

Right now I have:

  • “ul li:nth-of-type(2) button:not([disabled])”

but this only selects the second <li> with a child button that is not disabled - if it is disabled, it doesn’t select anything. In other words it doesn’t ‘find’ the second enabled button, it just checks if the second button is enabled or not and selects it accordingly.

I’ve tried

  • “ul li button:not([disabled]):nth-of-type(2)”

but the problem with that is the button is the only child of <li>, so nth-of-type(2) doesn’t have anything to select.

What I think I need to be able to write is something like this:

  • “ul (li button:not([disabled])):nth-of-type(2)”

but I don’t think that’s the correct syntax :(

Any help would be greatly appreciated! If it helps anyone, I'm writing a UDF test to find (and select) the second available time slot for a time picker component in React.


Solution

  • Here's a way you can do it using :has() which now looks to have support in all updated browsers (thanks FF for catching up):

    button {
      width: 100px;
      height: 50px;
    }
    
    
    /* Second */
    
    li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled])) button {
      background: red;
    }
    
    
    /* first */
    
    li:has(button[disabled])+li:has(button:not([disabled])) button {
      background: blue;
    }
    
    
    /* third */
    
    li:has(button[disabled])+li:has(button:not([disabled]))+li:has(button:not([disabled]))+li:has(button:not([disabled])) button {
      background: green;
    }
    
    
    /* no disabled buttons per comment by haolt */
    
    li:first-child:has(button:not([disabled]))+li:has(button:not([disabled])) button {
      background: purple;
    }
    <ul>
      <li><button disabled/></li>
      <li><button disabled/></li>
      <li><button /></li>
      <li><button /></li>
      <li><button /></li>
    </ul>
    
    <ul>
      <li><button /></li>
      <li><button /></li>
      <li><button /></li>
      <li><button /></li>
      <li><button /></li>
    </ul>

    It's not very elegant, as we are chaining next sibling + selectors, but it works.