如何编写CSS选择器根据兄弟元素序号模运算结果控制元素显示？

HTML结构 #

<div id="parent">
    <div></div>
    <div></div>
    <div></div>
    ...
    <div id="fourthToLast"></div>
    <div></div>
    <div id="penultimate"></div>
    <div></div>
</div>

需求说明 #

#penultimate和#fourthToLast是两个特殊的兄弟元素，需要根据媒体断点及父元素内兄弟元素的总数，仅显示其中一个并设置不同宽度。我们需要将伪代码中的条件silibingNrOf(#penultimate) mod x = y（即#penultimate的兄弟序号从1开始，对x取余等于y）转换为合法的CSS选择器。

转换后的CSS代码 #

#fourthToLast, #penultimate { display: none; }

@media screen and (min-width: 400px) {
    /* 当#penultimate的序号 mod 2 = 0时显示并设置宽度 */
    #parent:has(> #penultimate:nth-child(even)) #penultimate {
        width: 25%;
        display: block;
    }
    
    @media screen and (min-width: 800px) {
        #penultimate { display: none; }
        
        /* 当#penultimate的序号 mod 3 = 2时显示并设置宽度 */
        #parent:has(> #penultimate:nth-child(3n+2)) #penultimate {
            width: 33%;
            display: block;
        }

        /* 当#penultimate的序号 mod 3 = 0时显示#fourthToLast并设置宽度 */
        #parent:has(> #penultimate:nth-child(3n)) #fourthToLast {
            width: 16.666%;
            display: block;
        }   
    }
}

选择器说明 #

• #penultimate:nth-child(even)：匹配作为偶数位子元素的#penultimate，对应序号mod2=0的情况。
• #penultimate:nth-child(3n+2)：匹配序号为2、5、8...的#penultimate，对应序号mod3=2的情况。
• #penultimate:nth-child(3n)：匹配序号为3、6、9...的#penultimate，对应序号mod3=0的情况。
• :has()选择器：用于判断父元素#parent是否包含符合条件的#penultimate，从而定位到需要显示的目标元素。

内容的提问来源于stack exchange，提问作者jamacoe