仅当第一个元素有其他兄弟元素时才对其进行定位

Question

在没有添加任何类(或触摸HTML)的情况下,如果该div中有第二个元素,有没有办法将div中的第一个元素作为目标？以下是我的HTML:

<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

为了获得更好的图片,可以使用一些上下文...我想把.content它放在中心,如果它是内部唯一的.content .grid.但如果有两个.contentdiv,那么我希望它们彼此相邻.

注意:

我已经知道我可以瞄准第二个.content了

.grid .content:nth-child(2) { ... }

Answer 1

.grid > .content:first-child:not(:only-child) {
    color: blue;
}

<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">Don't apply here</div>
</div>
<div class="grid">
    <div class="content">I WANT TO APPLY CSS TO THIS</div>
    <div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>

:first-child:not(:only-child) 将是你的选择器.