Child Selectors on Nested Lists

A child selector hits only the children of a parent element. In this example, there is an undordered list with a class of color, e.g., <ul class="colors">, with the primary colors as its children, each with a nested list of synonyms.

Using the child selector of ul.colors > li { list-style-type: none; }, the primary colors will have no bullet points next to them, but the synonyms will still have bullet points:

• Red
  • Crimson
  • Scarlet
• Yellow
  • Lemon
  • Gold
• Blue
  • Navy
  • Cobalt