Как выбрать нечетный-ребенок в любой последовательности внутри тела?

Question

У меня есть структура html что-то вроде этого.

Как я могу добиться, чтобы цвет фона был красным или синим на основе их последовательности в теле?

Answer 1

С JQuery:

$(".my-class").filter(":odd").css("background","red"); 
 
$(".my-class").filter(":even").css("background","blue");

.common { padding: 20px 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="my-class common"></section> 
 

 
    <div class=""> 
 
     <section class="my-class common"></section> 
 
    </div> 
 

 
    <div class=""> 
 
     <div> 
 
      <section class="my-class common"></section> 
 
     </div> 
 
    </div> 
 

 
    <section class="my-class common"></section>

Answer 2

Невозможно с селекторами css. Берите с JavaScript:

Array.prototype.forEach.call(document.querySelectorAll('.my-class'), function(c, i){ 
    c.style.backgroundColor = i%2 === 0 ? "tomato" : "skyblue"; 
}); 

Working Fiddle

Использование JQuery:

$('.my-class:even').css({'background-color': 'tomato'}); 
$('.my-class:odd').css({'background-color': 'skyblue'}); 

Или лучше было бы добавить классы, с помощью JavaScript/JQuery, как my-class--odd и my-class--even который содержит стили.

Answer 3

Это возможно только с помощью CSS с помощью nth-child и прямых селекторов детей:

body > div, 
 
body > section, 
 
body > section > div { 
 
    border: solid 1px green; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #aaa; 
 
} 
 

 
body > .my-class:nth-child(odd), 
 
body > :nth-child(odd) .my-class { 
 
    color: white; 
 
    background: red; 
 
} 
 

 
body > .my-class:nth-child(even), 
 
body > :nth-child(even) .my-class { 
 
    color: white; 
 
    background: blue; 
 
}

<div class="my-class">.my-class (first)</div> 
 
<div>div 
 
    <div class="my-class">.my-class (second)</div> 
 
</div> 
 
<section>section 
 
    <div>div 
 
    <div class="my-class">.my-class (third)</div> 
 
    </div> 
 
</section> 
 
<div class="my-class">.my-class (fourth)</div>