[英]CSS: How to create <li> Pseudo Element in <ul> Level 1, but not in <ul> Level 2?
Challenge:挑战:
li:last-child:after
should get created for main navigation ul.level_1
ul.level_1
创建一个名为li:last-child:after
的伪元素ul.level_2
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.相反,
ul.level_1
应该只存在一个正方形。 How to do so?怎么做?
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;
}
You need to select only those li elements which are the direct children of the level_1 ul.您只需要 select 那些是 level_1 ul 的直接子级的 li 元素。 At the moment you are selecting any li, at any level below the ul.
目前,您正在选择任何 li,位于 ul 以下的任何级别。
The child combinator (>) is placed between two CSS selectors.
子组合器 (>) 放置在两个 CSS 选择器之间。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.