css style the rows in a multi-level unordered list to alternate colors

Question

css style the rows in a multi-level unordered list to alternate colors

My Vision:

I have a vision of a table with alternating row colors, but I need to display the data in a tree structure with multiple levels. Despite this requirement, I still want it to maintain the appearance of a table with alternating row colors. Essentially, I want the best of both worlds.

https://i.sstatic.net/7OAWW.png

Current Progress

https://i.sstatic.net/462ep.png

The challenge I'm facing is that each level has its own ul/li tags, making it complicated to use the nth-child selector for styling. The alternating row colors for each level clash with one another, resulting in a visually unpleasing design.

Current CSS:

li:nth-child(odd)>div {
  background-color: lightblue;
}

Seeking CSS Solutions

To tackle this issue, I experimented with a more complex tree structure for testing purposes.

See the JSFiddle here:

https://jsfiddle.net/yshk8dbg/

html css xhtml

Answer 1

Answer №1

To enhance the precision of your css, you can simply assign an id to the root ul:

#tree > li:nth-child(2n + 1) > div {
  background-color: lightblue;
}

<ul id="tree">
  <li>
    <div>AAAA</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 4</div>
      </li>
    </ul>
  </li>
  <li>
    <div>BBBB</div>
  </li>
  <li>
    <div>CCCC</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
    </ul>
  </li>
</ul>

Answer 2

To enhance the precision of your css, you can simply assign an id to the root ul:

#tree > li:nth-child(2n + 1) > div {
  background-color: lightblue;
}

<ul id="tree">
  <li>
    <div>AAAA</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
      <li>
        <div>Node 4</div>
      </li>
    </ul>
  </li>
  <li>
    <div>BBBB</div>
  </li>
  <li>
    <div>CCCC</div>
    <ul>
      <li>
        <div>Node 1</div>
      </li>
      <li>
        <div>Node 3</div>
      </li>
    </ul>
  </li>
</ul>

css style the rows in a multi-level unordered list to alternate colors

My Vision:

Current Progress

Current CSS:

Seeking CSS Solutions

See the JSFiddle here:

Answer №1

Similar questions

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

In HTML, favoring the use of "//domain.com" over "https://domain.com" or "http://domain.com" is recommended for greater flexibility and compatibility

Is there a way to use a Google Chrome command line switch to simulate the dimensions of a

Utilize SVG images repeatedly while still retaining control over CSS styling

What is the best way to convert this JavaScript iteration function into jQuery?

The navigation bar is missing from the screen

A web address shared in a post appears within the nested frame of an iframe

What is the best way to convert minutes into both hours and seconds using javascript?

Displaying a hand cursor on a bar chart when hovered over in c3.js

Duplicate an HTML element within an iframe and display it

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

A guide to updating the image src with a click using CSS exclusively, without JavaScript intervention

Creating a set in AngularJS JSON data structure can be easily achieved by using the unique

Styling text within a bootstrap button using CSS

Issues with HTML warnings not functioning properly in React Multi Step Forms

Adjust the height of images to be consistent

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

Customize the appearance of a React component depending on its unique identifier

PHPMail is failing to properly format emails in HTML

The div does not allow elements to be centered