CSS 替代 li:has(+ .class) 关系伪 class 和 li:not(.class ~ li)

Question

我有一个脚本 (JsFiddle here) 可以检测 li 块元素何时在页面上垂直居中并为其分配 .centered class 以使其成为通过 CSS.

变大

.centered {
    height: 30vh;
    background-color: #bbb;
    -webkit-transition: height 0.6s;
}

一旦确定了中心元素，我就设法 select 下一个同胞：

.centered + li {
    height: 20vh;
    background-color: #ccc;
    -webkit-transition: height 0.6s;
}

当我尝试 select 纯 CSS

中 .centered 元素之前的兄弟元素时出现问题

看了 this question from 2011 之后，我尝试使用其中一条评论和其他 select 中建议的 :has() 伪 class，但没有成功。

这个 CSS4 关系伪 class 可以解决问题，但目前不受支持：

li:has(+ .centered) {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

我还尝试 select li 元素的 last-of-type 不是 .centered 的兄弟元素，但是 :not() 仅支持简单的 selectors 或者我只是不知道如何正确链接 selectors。

这是无法正常工作的 select 或：

li:not(.centered ~ li):last-of-type {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

问题：是否有任何伪 classes 和 selectors 的组合可以在纯 CSS 中实现这一目的？

我希望在提出这些问题后已经取得了一些进展。

Answer 1

Is there any combination of pseudo classes and selectors that could do the trick in pure CSS?

没有； :not(.centered ~ li) 不起作用的原因确实是它目前只支持简单的选择器——比如 :has()，:not() 将只接受选择器 4 中的组合器。因为没有伪 classes 目前接受组合器，并且唯一可用的兄弟组合器继续前进，在这方面你只剩下一个非常受限的域语言。这就是对选择器进行这些添加的原因。

至于进步...进步就:has()伪class已经诶。最后我听说，工作组仍在决定是允许 CSS 中的 :has() 子集还是将其分离为自己的伪 class，供应商将查看有多少他们可以在 CSS 中实现它以使其起作用。但我认为还没有任何数据。

Answer 2

在@BoltClock 和@torazaburo 评论确认这是不可能的之后，我更改了初始 jQuery 选择起始元素

来自这里：

        middleElement = this;
        $(this).toggleClass("centered", true);

为此：

        middleElement = this;
        $(this).prev().toggleClass("top", true);

无需添加额外的 javascript 代码，我就可以更改我的 CSS 选择器。

发件人：

.centered { /*selects the middle element */ 
        height: 30vh;
        background-color: #bbb;
        -webkit-transition: height 0.6s;
    }

.centered + li { /*selects the next sibling after middle element */ 
        height: 20vh;
        background-color: #ccc;
        -webkit-transition: height 0.6s;
    }

li:has(+ .centered){ /*not supported at time of writing*/
        height: 20vh;
        background-color: #Fcc;
        -webkit-transition: height 0.6s;
    }

收件人：

 .top, .top + li + li { /* selects the siblings before and after the middle one*/
        height: 20vh;
        background-color: #ccc;
        -webkit-transition: height 0.6s;
    }


 .top + li { /* This selects the middle element*/
        height: 30vh;
        background-color: #bbb;
        -webkit-transition: height 0.6s;
    }

>> JSFiddle

CSS 替代 li:has(+ .class) 关系伪 class 和 li:not(.class ~ li)

CSS alternative to li:has(+ .class) relational pseudo class and li:not(.class ~ li)

html

css

css-selectors

pseudo-class