Why: does the first child choose all the children?

Question

I want to select only the very first links from the drop-down menu (those that have the text "ONE"), but :first-child selects all of them.

Link

http://jsfiddle.net/773Xd/1/

Sorry for the mess in the HTML part, but I'm setting up a Wordpress theme and it produces so many classes and identifiers.

Most importantly at the end of the CSS file.

Answer 1

Change your CSS selector to this ...

 #page-navigation ul li .sub-menu li:first-child a 

(i.e. put the :first-child pseudo :first-child on li , not a ).

Take a look at jsfiddle.net

The old selector did not work, because a always the first descendant of li elements.

But in the new selector, li is the first child of ul elements.