How do I space the main list without spacing the sublists in CSS?

You can space the main list items without affecting the sublists using CSS by targeting the direct children of the main list. Here's how:

1. Target the Main List:

- Identify the main list you want to style. This is typically a <ul> or <ol> element.

2. Apply CSS to Direct List Items:

- Use the direct child selector (>) to target only the immediate list items (<li>) of the main list.

3. Use Margin or Padding for Spacing:

- Apply margin-bottom or padding-bottom to create spacing between the main list items.

4. Example CSS Code:

ul.main-list > li {
  margin-bottom: 20px; / Adjust the value as needed /
}

- In this example, ul.main-list > li selects all direct list item children of the unordered list with the class main-list.

5. HTML Structure Example:

<ul class="main-list">
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

6. Explanation:

- The CSS rule ul.main-list > li only affects the immediate <li> elements within the <ul> with the class main-list. It doesn't apply the margin-bottom to the <li> elements within the nested <ul>.

7. Alternative Approach with Padding:

- You can also use padding-bottom instead of margin-bottom, depending on your layout requirements. The key is still to use the direct child selector.

ul.main-list > li {
  padding-bottom: 20px; / Adjust the value as needed /
}

By targeting only the direct children of the main list, you ensure that the spacing is applied only to the top-level list items, leaving the sublists unaffected.

Learn more about this