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: ```

Item One Item One

``` 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?

Accepted Answer

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");
```

Using :visible and :first-child together in jQuery

Solution

Problem