Using :visible and :first-child together in jQuery

Question

I'm trying to use the ":visible" and ":first-child" pseudo-selectors together in jQuery and it doesn't seem to be working out. I have the following HTML:

<div>
    <a class="action" style="display:none;">Item One</a>
    <a class="action">Item One</a>
    <a class="action">Item One</a>
</div>

And the following jQuery call:

$("div a.action:visible:first-child").addClass("first");

But it never seems to find the right element...it finds the first element but not the first visible element. I've even tried swapping the selector order ":first-child:visible" instead of ":visible:first-child" and that doesn't work either. Any ideas?

Answer 1

I'm not sure why :visible:first-child isn't working, but you can try

$("div a.action:visible").eq(0).addClass("first");

Answer 2

As far as I know the pseudo-class selector :first-child will only match the first child ever. It can not be further specified by adding a pseudo-class that it must also be visible. You might want to try writing

$("div a.action:visible:first").addClass("first");

instead of using the proper css pseudo-class. JQuery documentation for :first

Answer 3

Your selector

$("div a.action:visible:first-child").addClass("first");

matches only the A element only when it's the first-child of the parent DIV and when it is visible.

If you want to get the first visible A element, you should use the .eq function

$("div a.action:visible").eq(0).addClass("first");

or the :first pseudo-class

$("div a.action:visible:first").addClass("first");

Answer 4

You might want to try $( "div a.action:visible(:first-child)) as your selector, that is how jQuery specifies using multiple psuedo-selectors in its API documentation.