css - 仅当第一个元素有其他兄弟时才将其作为目标

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 居中，如果它是 .grid 中唯一的 .content。但是如果有两个 .content div，那么我希望它们彼此相邻 float 。

注意:

我已经知道我可以通过

定位第二个 .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) 将是您的选择器。