只有当CSS中有Y个兄弟姐妹时，我如何才能定位最后的N个兄弟元素？ [英] How do I target the last N sibling elements only when there are Y siblings in CSS?

问题描述

例如，我有项目列表，如果 和 如果有8,11,14 ...等兄弟元素，我希望最后两个看起来不同（例如 8 + 3n ）。

如果还有其他数量的孩子，我希望他们看起来都一样。

解决方案

<到目前为止，最简单的方法是用你自己的伪类来设置你想要的样式中的每一个元素。

最后一个孩子， ，由3n + 8（8,11,14 ...）表示。然后，倒数第二个孩子是3n + 7（7,10,13 ...）。

  li：nth-​​last-child（1）：nth-​​child（3n + 8），li：nth-​​last-child（2）：nth-​​child（3n + 7）{color：red ;} ul {counter-reset：item; list-style-type：none; } li {display：inline;填充：0.25em; } li :: before {content：counter（item）;反增量：item; }  

< ul>< li>< li> ;<李><李><李><李><李><李>< / UL>< UL><李><李><李><李> <李><李><李><李><李>< / UL>< UL><李><李><李><李><李>< ;李><李><李><李><李>< / UL>< UL><李><李><李><李><李><立GT;<李><李><李><李><李>< / UL>< UL><李><李><李><李><李> ;<李><李><李><李><李><李><李>< / UL>< UL><李><李><李> <李><李><李><李><李><李><李><李><李><李>< / UL>< UL>< ;李><李><李><李><李><李><李><李><李><李><李><李><李> ;<李>< / UL>

你也可以用一个复杂的选择器， CSS可以检测孩子的数量和元素具有？，用3n + 8替换：nth-​​last-child（）参数，并使用另外的：nth-

将最后两个元素定位到一个伪类。 data-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  li：first-child：nth-​​last-child（3n + 8）〜li：nth-​​last-child（-n + 2）{color：red;} ul {counter-reset：item; list-style-type：none; } li {display：inline;填充：0.25em; } li :: before {content：counter（item）;反增量：item; }  

< ul>< li>< li> ;<李><李><李><李><李><李>< / UL>< UL><李><李><李><李> <李><李><李><李><李>< / UL>< UL><李><李><李><李><李>< ;李><李><李><李><李>< / UL>< UL><李><李><李><李><李><立GT;<李><李><李><李><李>< / UL>< UL><李><李><李><李><李> ;<李><李><李><李><李><李><李>< / UL>< UL><李><李><李> <李><李><李><李><李><李><李><李><李><李>< / UL>< UL>< ;李><李><李><李><李><李><李><李><李><李><李><李><李> ;<李>< / UL>

Is it possible to target the last N sibling elements when there are Y siblings?

For example I have list of items, if and only if there are exactly 8, 11, 14... etc sibling elements I want the last two to look different (so 8 + 3n).

If there is any other amount of children I want them all to look the same.

解决方案

The easiest way by far is to target each of the 2 elements you want to style with its own set of pseudo-classes.

The last child, as you state, is represented by 3n+8 (8, 11, 14...). It then follows that the penultimate child is 3n+7 (7, 10, 13...).

li:nth-last-child(1):nth-child(3n+8),
li:nth-last-child(2):nth-child(3n+7) {
  color: red;
}

ul { counter-reset: item; list-style-type: none; }
li { display: inline; padding: 0.25em; }
li::before { content: counter(item); counter-increment: item; }

<ul><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>

You can also do this with one complex selector using the technique from Can CSS detect the number of children an element has?, substituting 3n+8 for the :nth-last-child() argument, and using an additional :nth-last-child(-n+2) to target the last two elements with one pseudo-class:

li:first-child:nth-last-child(3n+8) ~ li:nth-last-child(-n+2) {
  color: red;
}

ul { counter-reset: item; list-style-type: none; }
li { display: inline; padding: 0.25em; }
li::before { content: counter(item); counter-increment: item; }

<ul><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>

这篇关于只有当CSS中有Y个兄弟姐妹时，我如何才能定位最后的N个兄弟元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！