пункт Match, прежде чем указанный элемент

Question

Я следующий список:

<ul> 
    <li class="parent">1.</li> 
    <li class="child">1. first</li> 
    <li class="child">1. second</li> 
    <li class="child">1. third</li> 

    <li class="parent">2.</li> 
    <li class="child">2. first</li> 
    <li class="child">2. second</li> 
    <li class="child">2. third</li> 
    <li class="child">2. fourth</li> 
    <li class="child">2. fifth</li> 

    <li class="parent">3.</li> 
    <li class="child">3. first</li> 
    <li class="child">3. second</li> 
    <li class="child">3. third</li> 
    <li class="child">3. fourth</li> 

    <li class="parent">4.</li> 
    <li class="child">4. first</li> 
    <li class="child">4. second</li> 
    <li class="child">4. third</li> 
</ul> 

Я хочу, чтобы установить заданный фон для first и последних элементов. Хотя у меня нет никаких проблем с first:

.parent + .child { 
    background-color: whitesmoke; 
} 

, то я не знаю, что делать с продолжается.

Просто: я хочу соответствовать .child до .parent.

Answer 1

Вы можете использовать JQuery .prev() селектор:

$('.parent').prev().css("background-color", "red");

http://jsfiddle.net/gC53q/1/

В CSS нет селектора предыдущего дочернего элемента. См here

Answer 2

li:nth-child(2n+2) { 
    background-color: whitesmoke; 
} 

Вы ищете селектор nth-child. http://jsfiddle.net/mKH7j/

Answer 3

Вы хотите третий из трех дочерних селекторов, поэтому выберите третий родственный:

.child + .child + .child { background-color: red; }

http://jsfiddle.net/gC53q/

Answer 4

Вот один без JQuery:

li:nth-child(2n) { background: red; } 
li:nth-child(4n) { background: whitesmoke; } 

А вот это демо: http://jsfiddle.net/G8vCZ/1/