html - How do I target the last N sibling elements only when there are Y siblings in CSS? -

is possible target last n sibling elements when there y siblings?

for example have list of items, if , only if there 8, 11, 14... etc sibling elements want last 2 different (so 8 + 3n).

if there other amount of children want them same.

the easiest way far target each of 2 elements want style own set of pseudo-classes.

the last child, state, represented 3n+8 (8, 11, 14...). follows penultimate child 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 1 complex selector using technique can css detect number of children element has?, substituting 3n+8 :nth-last-child() argument, , using additional :nth-last-child(-n+2) target last 2 elements 1 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>