Нацеливайте всех детей каждого родителя

Question

Я некоторое время боролся с этим, и пришло время для некоторой помощи. у меня есть это:

<div class="news-images"> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect"></div> 
 
    </div> 
 
    </div> 
 
</div>

Я хочу предназначаться каждый (2п + 1, четное/нечетное рода вещи) экземпляр класса "эффект". Возможно ли это с помощью чистого CSS или мне нужен JavaScript?

Спасибо!

Answer 1

Хотите ли вы этого? если нет, поясните кратко.

.col-md-12:nth-child(odd) .effect{ 
 
    background: black; 
 
    color: #fff; 
 
} 
 
.col-md-12:nth-child(even) .effect{ 
 
    background: blue; 
 
    color: #fff; 
 
}

<div class="news-images"> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
    <div class="grid"> 
 
     <div class="effect">hello world!</div> 
 
    </div> 
 
    </div> 
 
</div>