Question

Is there a way in either CSS (IE7+) or jQuery to select items whose first-child has a particular type, such that like the following pseudocode, you would be able to select all li with a first child a:

li:first-child(a)

Update

I was looking for the solution @SLaks suggested, because I wanted to get it in one selector. However the .parent() method is faster, see: http://jsfiddle.net/c4urself/Qw8fX/

$("li > a:first-child").parent()

vs.

$("li:has(>a:first-child)")

Update 2

See performance differences between the two methods here at jsPerf

http://jsperf.com/jquery-has-child-vs-parent-child-and-parent

Answer 1

CSS can’t do this, but jQuery can:

li:has(>a:first-child)

CSS cannot do this because CSS was designed to be applied in a forward-only manner as the browser reads the HTML. It is always possible to determine which CSS rules apply to an element immediately, without waiting for the element’s children or subsequent siblings.