Home/ Questions/Q 7793937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T22:38:42+00:00

I have a number of elements (siblings) which may or may not be hidden

  • 0

I have a number of elements (siblings) which may or may not be hidden (have the class “is-hidden” applied to it).

I want to select one of the elements based on its index, thus using the :nth-child pseudo class.

However, I want to select the nth visible child, not the nth child of all elements. So I tried something like:

$('.product-cell'):not('is-hidden'):nth-child(2);

But that doesn’t work, have I messed up my syntax or is it impossible to stack pseudo classes like this? How do I go about solving this problem?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    But that doesn’t work, have I messed up my syntax or is it impossible to stack pseudo classes like this? How do I go about solving this problem?

    Both, actually.

    If you’re using the colon syntax you need to put all your selectors in a single string. If you want to use multiple method calls, it’s with a period . instead of a colon :.

    Additionally, :nth-child() always picks an element that’s the nth child of its parent, regardless of whether it’s hidden or has a certain class, etc. So you need to use :eq() instead of :nth-child(), like this:

    // :eq() is zero-indexed so :eq(1) selects the second match
$('.product-cell:not(.is-hidden):eq(1)')
    • 0