CSS: How to create <li> Pseudo Element in <ul> Level 1, but not in <ul> Level 2?

Question

Challenge:

• A pseudo element called li:last-child:after should get created for main navigation ul.level_1
• The pseudo element should NOT get created for subnavigation ul.level_2

---

Coding:

 ul { display: flex; width: max-content; list-style: none; padding: 0; margin: 0 auto; } a { display: block; width: 100px; height: 50px; color: white; background-color: orange; } /*Creating the pseudo element */ li:last-child:after { content: ''; position: absolute; top: 100px; left: 50px; width: 50px; height: 50px; background-color: red; transition: transform 1s; } /*Creating the desired actions for main navigation li childs 1 to 5*/ li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);} li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);} li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);} li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);} li:nth-child(5):hover:last-child:after { transform: translatex(500px);}

 <div> <ul class="level_1"> <li class="sibling"><a href="#">Parent 1</a></li> <li class="sibling"><a href="#">Parent 2</a></li> <li class="sibling"><a href="#">Parent 3</a></li> <li class="submenu sibling"> <ul class="level_2"> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> </ul> </li> <li class="sibling"><a href="#">Parent 5</a></li> </ul> </div>

---

Issue: As you can see, currently there are two red squares moving around. Instead, only one square for ul.level_1 should be existent. How to do so?

Answer 1

Try this. Happy coding.

ul.level_1 > li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

Answer 2

You need to select only those li elements which are the direct children of the level_1 ul. At the moment you are selecting any li, at any level below the ul.

See MDN :

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

 ul { display: flex; width: max-content; list-style: none; padding: 0; margin: 0 auto; } a { display: block; width: 100px; height: 50px; color: white; background-color: orange; } /*Creating the pseudo element */ ul.level_1 > li:last-child:after { content: ''; position: absolute; top: 100px; left: 50px; width: 50px; height: 50px; background-color: red; transition: transform 1s; } /*Creating the desired actions for main navigation li childs 1 to 5*/ li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);} li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);} li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);} li:nth-child(4):hover ~ li:last-child:after { transform: translatex(400px);} li:nth-child(5):hover:last-child:after { transform: translatex(500px);}

 <div> <ul class="level_1"> <li class="sibling"><a href="#">Parent 1</a></li> <li class="sibling"><a href="#">Parent 2</a></li> <li class="sibling"><a href="#">Parent 3</a></li> <li class="submenu sibling"> <ul class="level_2"> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> </ul> </li> <li class="sibling"><a href="#">Parent 5</a></li> </ul> </div>