Tree/List Via Html CSS

Creating tree/list via UL LI tags

by Bharat Sewani

HTML

<ul class="Container">
  <li class="root">
    <a href="#">Root</a>
  </li>
  <ul class="parentContainer">
    <li>
      Child1
      <ul>
        <li>
          Child11
        </li>
      </ul>
    </li>
    <li>
      Child2
      <ul>
        <li>
          Child21
        </li>
        <li>
          Child22
        </li>
      </ul>
    </li>
    <li>
      Child3
      <ul>
        <li>
          Child33
        </li>
      </ul>
    </li>
  </ul>
</ul>

CSS

.parentContainer li li {
   color: green;
   font-weight: normal;
 }
 
 .parentContainer,
 .Container > li {
   color: red;
   font-weight: bold
 }
 
 a {
   color: red;
 }