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