How to Separate Nested List Styles with CSS

In this article, we’ll explain how to separate styles within nested lists. Nested lists are a common element in web design. Using CSS to style them can make pages more readable and accessible. However, when styling nested lists, there are some tips and techniques to ensure that styles are applied correctly at each level.

Read more: CSS Tutorial

Understanding Nested Lists

First, let’s understand what nested lists are. A nested list is one list item that contains another list item. In HTML, we can create nested lists using the <ul> and <li> tags. For example:

<ul> 
<li>List item 1</li> 
<li>List item 2
<ul> 
<li>Sub-list item 1</li> 
<li>Sub-list item 2</li> 
</ul> 
</li> 
<li>List item 3</li> 
</ul> 

In the above code, <ul> represents an unordered list, and <li> represents a list item. In the second list item, we create a nested unordered list.

Basic nested list styling

First, we can add some basic styling to the entire nested list, such as changing the color of the list items, making the text bold, and so on. This can be set using the following CSS code:

ul {
color: blue;
font-weight: bold;
} 

In the above code, we select the <ul> element and set its color to blue and its text to bold. This will apply to all nested lists.

Separating Styles at Different Levels

However, often we want different levels of nested lists to have different styles. For example, we might want the parent list items to have a larger font size, while the child list items might be indented. In this case, we can use CSS selectors to separate styles at different levels.

Separating Parent Styles

To separate parent styles, we can use the > selector. The > selector selects the immediate children of the current element. For example, we can use the following CSS code to style the parent list item:

ul > li {
font-size: 20px;
}

In the above code, ul > li selects the <li> element, which is the direct child of the <ul> element, and sets the font size to 20 pixels.

Separate Child Styles

To separate child styles, we can use the spacebar selector. The spacebar selector selects descendant elements of the current element. For example, we can use the following CSS code to style child list items:

ul li {
margin-left: 20px;
}

In the above code, ul li selects the <li> element, which is a descendant of the <ul> element, and sets the left margin to 20 pixels.

By using these two selectors, we can separate the styles of nested lists at different levels. This makes the list structure clearer, easier to read, and easier to understand.

Example Description

The following example illustrates how to separate the styles of nested lists.

<ul> 
<li>List item 1</li> 
<li>List item 2
<ul> 
<li>Child list item 1</li> 
<li>Child list item 2</li> 
</ul> 
</li> 
<li>List item 3</li> 
</ul> 

We want the text color of the parent list item to be red and the text color of the child list items to be green. This can be achieved using the following CSS code:

ul > li {
color: red;
}

ul li {
color: green;
}

In the above code, we use the > selector to set the font color of the parent list item to red, and the space selector to set the font color of the child list item to green.

With the above settings, we can get the following nested list style:

• List item 1 (red)
• List item 2 (red)
  • Child list item 1 (green)
  • Child list item 2 (green)
• List item 3 (red)

Summary

In this article, we introduced how to separate nested list styles. By using CSS selectors, we can style parent and child list items separately, making nested lists clearer and easier to understand. We hope this article helps you understand and apply nested list styles.