Trouble understanding children() and :first in jQuery -

i confused how selection of element in jquery works using children() , :first custom class?

for instance, in jsfiddle, code ul > li {hello nest} not class .emphasis first-child of top level ul gets it. expected inner li class.

the commented out line in jquery code works expect to.

:first selector returns first matched item among selected

$('ul').children('li:first').addclass('emphasis');

selects children of ul li , takes first of them.

whereas

 $('ul > li:first-child').addclass('emphasis');

takes li direct children of ul , takes every first child of matched set.

DIs