Target the first element only if it has other brothers and sisters

Question

Without adding any classes (or touches of HTML), is there a way to customize the first element inside a div only if there is a second element in that div? Below is my 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> 

Several contexts for this for a better image ... I want to center .content if this is the only .content inside the .grid . But if there are two .content , I want them to swim next to each other.

Note:

I already know that I can configure the second .content to

 .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) will be your selector.