jQuery - select children which has specific styles

I do not know how to select the first span in the following example.

<div class="sp">
  <span style="visibility:hidden">abc</span>
  <span>xyz</span>
</div>

I have tried using this one, did not work.

$('div.sp span[visibility=hidden]') // not work

thank开发者_开发百科s!

$('div.sp span[style="visibility:hidden"]')

See Attribute Equals Selector

In your selector you did not mention the attribute name(style) and also the quotes are missing wrapping the complete selector. Try this

$("div.sp span[style='visibility:hidden']");

If you are looking to find a hidden span then I would suggest you to use this because attribute selector will try to match visibility:hidden as it is. If there is any space between this value then it will fail. :hidden selector looks for element which are not visible or display is none.

$("div.sp span:hidden")

Get first span:

$('div.sp span:first');

If you want get the first span with visibility:hidden, is other thing:

$('.sp span[style="visibility:hidden"]:first');