如果兄弟元素存在于PURE CSS中,则有条件地设置样式

Question

我有以下结构,其中第二个元素可能出现也可能不出现.

<div class="wrapper">
    <div class="firstElement"></div>
    <div class="secondElement"></div>
</div>

我想有条件地设置样式,.firstElement如果.secondElement存在的话.

有没有办法用PURE CSS做到这一点？有兄弟选择器/父选择器吗？

谢谢!

Answer 1

一般来说,没有.CSS在DOM中向前/向下读取 - 它不会向后/向后读取.但是使用此标记,您可以使用:not(:last-child)

.firstElement:not(:last-child) {
  color: red
}

<div class="wrapper">
    <div class="firstElement">target this</div>
    <div class="secondElement"></div>
</div>

<div class="wrapper">
    <div class="firstElement">not this</div>
</div>