CSS 3에서 형제 요소를 선택하는 방법은 무엇입니까?

Question

li.active 전후의 형제 요소를 선택하고 싶습니다.

HTML :

<ul class="inline avancement"> 
    <li>Réception des réponses</li> 
    <li class="active">Achat</li> 
    <li>Evaluation</li> 
</ul> 

CSS :

ul.avancement li{ 

padding-right:20px; 
padding-left:10px; 
margin-left:-4px; 
height:37px; 
line-height:37px; 
} 
li.active ~ li{ 
    background:url(../img/delimiter_step_left.png) right top no-repeat; 
    background-color:#ff0000; 
} 
li.active + li{ 
    background:url(../img/delimiter_step_left.png) right top no-repeat; 
    background-color:#999999; 
} 
ul.avancement li{ 
    background:url(../img/delimiter_step.png) right top no-repeat; 
    background-color:#999999; 
    color:white; 
} 
ul.avancement li.active{ 
    background:url(../img/delimiter_step_actif.png) right top no-repeat; 
    background-color:#ff0000; 
} 
ul.avancement li:last-child{ 
    background:none; 
    background-color:#999999; 
} 

그러나이 작동하지 않습니다!

결과 :

내가 활성 단계 이전에 빨간색 단계를 기다리고 있어요! 뭐가 문제 야 ? 감사합니다.

Answer 1

CSS 전용 솔루션으로 이전 요소를 선택할 수 없습니다! 나를 믿지 않으면 Selectors Level 3을 읽으십시오.

그러나 다음 부분은 정말 쉽게 처리 할 수 ​​있습니다.

.active + li { 
    color: red; 
} 

jsFiddle : http://jsfiddle.net/nkp8z/

질문이 100 % 분명하지 않지만 - 직접 이전과 옆에있는 모든 active 표시되지 않은 요소, 또는 단지 2 요소를 선택할까요 활성 한?