So, you're pretty good at CSS... you know some selectors... you're feeling pretty confident... therefore I challenge you!
Question -> Given the following snippet of HTML:
<div> <h1>heading</h1> <p>Some text...</p> <p>More text...</p> </div>
div p:first-child select, eh?
Answer -> Nothing!
Confused? So was I...
The confusion stems from what you think
:first-child is applied to. Using parentheses to explain operator precedence, you were probably thinking of:
:first-child selector is applied to the result of
The problem is, there is NO such notion of parentheses in the CSS specification, and operator precedence is strictly left to right. So in actuality, the selector is:
That is, it is looking for a
:first-child is a
p - which doesn't exist in the snippet of HTML.
What you need is the CSS3 :first-of-type selector:
And how did I notice this?
I was adding extra
:nth-child(xxx) pseudo classes to Sizzle and started to doubt the rules I had written for
By the way, I've got it all sorted now!