CODEWITHSUNDEEP
csscss-selectors
jamshid
jamshid

Reputation: 333

:nth-child For Nested Elements

I have following html code. I want to select odd or even .menu-item ul elements in this code that they are placed in Infinitely nested format. please help me...

<nav class='amazing-menu '>
  <ul id='menu_container'>
    <li class="parent">
      <a href="#" class="link">First</a>
      <div class="sub-menu">
        <ul class="menu-item">
          <!-- I want to => background-color: red; -->
          <li>
            <a href="" class="link">sub-item1</a>
          </li>
          <li class="parent">
            <a href="" class="link">sub-item1</a>
            <div class="sub-menu">
              <ul class="menu-item">
                <!-- I want to => background-color: blue; -->
                <li><a href="link">sub-sub-item1</a>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
                <li class="parent"><a href="link">sub-sub-item4</a>
                  <div class="sub-menu">
                    <ul class="menu-item">
                      <!-- I want to => background-color: green; AND so on ... -->
                      <li><a href="link">sub-sub-sub-item1</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item2</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item3</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item4</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="" class="link">sub-item2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 1181

Answers (2)

Asons
Asons

Reputation: 87313

nth-child does not work as you expect here, it work on sibling elements only, so on each nested level it starts over.

You can set a class to each, i.e. ul-red and so on, ...or do it using a script, as in below sample

var bkgcolors = ['ul-red','ul-blue','ul-green']
window.addEventListener('load', function() {
  var uls = document.querySelectorAll('.amazing-menu .menu-item');
  for (var i = 0; i < uls.length; i++) {
    uls[i].classList.add( bkgcolors[i] )
  }
})
.ul-red {
  background: red;
}
.ul-blue {
  background: blue;
}
.ul-green {
  background: green;
}
<nav class='amazing-menu '>
  <ul id='menu_container'>
    <li class="parent">
      <a href="#" class="link">First</a>
      <div class="sub-menu">
        <ul class="menu-item">
          <!-- I want to => background-color: red; -->
          <li>
            <a href="" class="link">sub-item1</a>
          </li>
          <li class="parent">
            <a href="" class="link">sub-item1</a>
            <div class="sub-menu">
              <ul class="menu-item">
                <!-- I want to => background-color: blue; -->
                <li><a href="link">sub-sub-item1</a>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
                <li class="parent"><a href="link">sub-sub-item4</a>
                  <div class="sub-menu">
                    <ul class="menu-item">
                      <!-- I want to => background-color: green; AND so on ... -->
                      <li><a href="link">sub-sub-sub-item1</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item2</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item3</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item4</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="" class="link">sub-item2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Upvotes: 1

Oleksii Dniprovskyi
Oleksii Dniprovskyi

Reputation: 135

Here you go, should be okay from what I understood you are trying to achieve. If work should be done on li's inside item-menu use an approach from comments! Hope it matched your goal. 

</style>
</head>
<body>

<nav class='amazing-menu '>
  <ul id='menu_container'>
    <li class="parent">
      <a href="#" class="link">First</a>
      <div class="sub-menu">
        <ul class="menu-item">
          <!-- I want to => background-color: red; -->
          <li>
            <a href="" class="link">sub-item1</a>
          </li>
          <li class="parent">
            <a href="" class="link">sub-item1</a>
            <div class="sub-menu">
              <ul class="menu-item">
                <!-- I want to => background-color: blue; -->
                <li><a href="link">sub-sub-item1</a>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
                <li class="parent"><a href="link">sub-sub-item4</a>
                  <div class="sub-menu">
                    <ul class="menu-item">
                      <!-- I want to => background-color: green; AND so on ... -->
                      <li><a href="link">sub-sub-sub-item1</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item2</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item3</a>
                      </li>
                      <li><a href="link">sub-sub-sub-item4</a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a href="link">sub-sub-item2</a>
                </li>
                <li><a href="link">sub-sub-item3</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="" class="link">sub-item2</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

<button onclick="myFunction()">Try it</button>


<script>
function myFunction() {
    var x = document.getElementsByClassName("sub-menu");
    for(var i = 0; i<x.length; i++)
    {
        if(i%2==0)
        {
            document.getElementsByClassName("menu-item")[i].style.backgroundColor  = "red";
        }
        else
        {
            document.getElementsByClassName("menu-item")[i].style.backgroundColor  = "blue";
        }
    }
}
</script>

</body>
</html>

P.S. I put a picture here that you can see whether is match your requirements! https://s27.postimg.org/ta75cv36r/image.png

Upvotes: 1

Related Questions