2016-01-06 3 views
5

Без добавления каких-либо классов (или прикосновений к 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. Но если есть два div .content, я хочу, чтобы они плавали рядом друг с другом.

Примечание:

Я уже знаю, что могу предназначаться второй .content по

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

ответ

6

.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) будет ваш селектор.

+0

Wow amazing. Спасибо огромное! – Ruby

Смежные вопросы