Why does the child selector select all descendants?

The child selector should select the immediate childs containing by a elemnt. But in the following code, the selector “div>ul>li” select all descendant

  • of div. I have no idea why the child selector expands its scope?

    div>ul>li { text-decoration: underline;             color: blue;         }         <div>           <ul>               <li>Item 1</li>               <li>Item 2</li>               <li>Item 3                   <ul>                       <li>Item 31</li>                       <li>Item 32</li>                   </ul>               </li>           </ul>       </div> 
  • Efficiently listing all last-level descendants of each root in a proper hierarchical graph (bipartite DAG)

    Let G = (V, E) be a graph which is hierarchical in the sense that its vertices are arranged in levels/layers (say 1 to k) and an edge can only be from a vertex at level i to a vertex at level i+1. Vertices at level 1 and k are called the roots and the leaves, respectively. The problem is to find all descendant leaves of each root. For instance, for the following graph, enter image description here

    the answer would be: 1: 12, 13 2: 12, 13 3: 12, 13, 14, 15, 16 4: 14, 15, 16

    A naive solution can be to run a DFS for each root which will take O(r(n+m)) time where r is #roots, n is #vertices and m is #edges.

    Can we do better? Another way to see the same graph is that it is a bipartite DAG.