[英]Selecting the last element among various nested containers
How can I select the last and deepest element in CSS? 如何选择CSS中最后和最深的元素?
Is there a way to improve this css code? 有没有办法改善这个CSS代码?
What solution do you proposed for a deep tree? 你为深树提出了什么解决方案? (~15-25).
(〜15-25)。
I'm avoiding using javascript. 我在避免使用javascript。 But SASS solutions are welcome.(maybe using @for?)
但SASS解决方案是受欢迎的。(可能使用@for?)
/*level 1*/ div.case > ul:last-child > li.leaf:last-child > div { font-weight: bold; background: red; } /*level 2*/ div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: blue; } /*level 3*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: green; } /*level 4*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: yellow; }
<div class="case"> <h1>Case 0</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </div> <div class="case"> <h1>Case 1</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 2</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="leaf"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content</div> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content a</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 3</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 4</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content(bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 5</h1> <ul> <li class="leaf"> <div>content 1</div> </li> <li class="leaf"> <div>content 2</div> </li> <li class="leaf"> <div>content 3(bold)</div> </li> </ul> </div>
If I understand your question correctly, you want to target the last li
tag in multiple ul
s, where the number of nesting levels in the ul
s is unpredictable. 如果我没有理解你的问题,你要定位的最后
li
多标签ul
s,其中嵌套级别的数目ul
s是不可预知的。
You want a selector that targets the "last and deepest element" in a containing block where the number of elements preceding it in the block are unknown and irrelevant. 您需要一个选择器,该选择器以包含块中“最后和最深元素”为目标,其中块中前面的元素数量是未知且不相关的。
This doesn't appear to be possible with Selectors 2.1 or Selectors 3 . 选择器2.1或选择器3似乎无法实现这一点。
The :last-child
, :last-of-type
and nth-child
pseudo-classes work when the nesting levels are fixed. :last-child
, :last-of-type
和nth-child
伪类在嵌套级别修复时起作用。 In a dynamic environment where there are multiple lists of varying nesting levels these selector rules will break. 在动态环境中,有多个不同嵌套级别的列表,这些选择器规则将会中断。
This will select the last li
in the first level ul
: 这将选择第一级
ul
的最后一个li
:
div.case > ul > li:last-child
This will select the last li
in the second level ul
: 这将选择第二级
ul
的最后一个li
:
div.case > ul > li:last-child > ul > li:last-child
This will select the last li
in the third level ul
: 这将选择第三级
ul
的最后一个li
:
div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child
and so on... 等等...
A solution, however, may exist in Selectors 4 , which browsers haven't yet implemented: 但是, 选择器4中可能存在一个解决方案,浏览器尚未实现:
li:last-child:not(:has(> li))
This rule targets last child li
s that have no descendant li
s, which matches your requirement. 该规则针对最后一个孩子
li
有没有后代小号li
s,这符合您的要求。
For now, however, if you know the nesting level for each of your ul
containers you can apply a class to each targeted li
. 但是,现在,如果您知道每个
ul
容器的嵌套级别,则可以将类应用于每个目标li
。
Thanks @BoltClock for help crafting the Selectors 4 rule (see comments). 感谢@BoltClock帮助制作Selectors 4规则(请参阅注释)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.