How to color nested list using css?

user_17379081 0
Viewed 170

I have like nested list mentioned below. I want to color it 'first li' Certification and Graphics Designing in different color and next list ISO and Brochure in difftent color and inside list ISO in different color. How could be this done?

<ul>
    <li>Certification
        <ul>
            <li>ISO
                <ul>
                    <li><label class="checkbox"><input type="checkbox" value="17" name="category[]"> CE</label></li>
                    <li><label class="checkbox"><input type="checkbox" value="18" name="category[]"> FSSAI</label></li>
                    <li><label class="checkbox"><input type="checkbox" value="19" name="category[]"> Trademark</label></li>
                </ul>
            </li>
        </ul>
    </li> 
    <li class="category-name">Graphics Designing
        <ul>
            <li> Brochure </li>
                                                                                          
        </ul>
    </li>  
</ul>
responsive-design html-lists css styles html
1 Answers

There are several ways of doing this in CSS.

This way just uses the nested structure to choose which lists to color what.

It starts by coloring every li that is a direct child of a ul blue.

Then it gets more specific by coloring every li that is the child of a ul that is a child (not a grandchild) of an li.

Then it gets even more specific by going down another layer and coloring those elements green.

You could of course invoke some of the classes you already have to make your selections. That's a matter of choice and depends on your particular use case. This snippet is general for coloring any set of nested unordered lists.

ul>li {
  color: blue;
}

ul>li>ul>li {
  color: magenta;
}

ul>li>ul>li>ul>li {
  color: green;
}
<ul>
  <li>Certification
    <ul>
      <li>ISO
        <ul>
          <li><label class="checkbox"><input type="checkbox" value="17" name="category[]"> CE</label></li>
          <li><label class="checkbox"><input type="checkbox" value="18" name="category[]"> FSSAI</label></li>
          <li><label class="checkbox"><input type="checkbox" value="19" name="category[]"> Trademark</label></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="category-name">Graphics Designing
    <ul>
      <li> Brochure </li>

    </ul>
  </li>
</ul>

user_108674540
Related