CODEWITHSUNDEEP
htmlcsscss-selectorshtml-listspseudo-element
Dave
Dave

Reputation: 201

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

Challenge:

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?

Upvotes: 0

Views: 724

Answers (2)

A Haworth
A Haworth

Reputation: 36565

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>

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

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;
}

Upvotes: 1

Related Questions