CSS to select top level of a ul

Question

li > ul > li selects all li elements which are deeper than the first level of a ul.

li selects all li elements

li:not(li > ul > li) should select all li elements which are no deeper than the first level of a ul--that is, only first level elements--but it doesn't. Why?

Thanks!

Answer 1

The reason li:not(li > ul > li) does not work is because the li > ul > li is not a simple selector (as Felix Kling noted in the comments to your question).

The easiest way to get the top level is to give a class or id to the outer most ul and then do:

.ulClassNameOrID > li {}

However, the following gets what you desire also (see fiddle) as it does not select any ul that is a direct child of a previous li (so is not a sublist of the outer list):

:not(li) > ul > li {}