CODEWITHSUNDEEP
csscss-selectors
Emmanuel Gauthier
Emmanuel Gauthier

Reputation: 551

how to select sibling elements in CSS 3?

I would like to select element sibling before and after 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;
}

But it doesn't work !

Result :

enter image description here

I'm waiting red step before active step ! What's wrong ? thanks

Upvotes: 1

Views: 274

Answers (1)

MarcinJuraszek
MarcinJuraszek

Reputation: 125630

You can't select previous element with CSS only solution! Read Selectors Level 3 if you don't believe me.

However, the next part can be done really easily. 

.active + li {
    color: red;
}

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

Although, your question isn't 100% clear - do you want to select all elements, that are not marked active, or only 2 elements that are directly before and next to the active one?

Upvotes: 1

Related Questions