web-dev-qa-db-fra.com

comment appliquer la règle css à l'élément précédent et à l'élément suivant en HTML?

Par exemple:

Tu as ceci:

<ul>
 <li>zero</li>
 <li>one</li>
 <li class="selected">two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

CSS:

.selected:previous {
   color: red;
}

.selected:next {
   color: green;
}

C'est possible?

htmlcssbrowsercross-browserstylesheet
16
CRISHK Corporation

Ce n'est pas possible avec du CSS pur. Vous pouvez styliser l'élément suivant mais pas le précédent.

Mais vous pouvez faire un tour avec css. Au lieu de donner la classe sélectionnée , vous pouvez donner la classe à votre élément précédent . Comme ça:

[~ # ~] html [~ # ~] 

<ul>
 <li>zero</li>
 <li class="previous">one</li>
 <li>two</li>
 <li>three</li>
 <li>more elements</li>
</ul>

[~ # ~] css [~ # ~] 

.previous{
   color: green;
}
.previous + li{
   color: red;
}
.previous + li + li{
    color:yellow;
}

Vérifiez cela http://jsfiddle.net/S5kUM/2/

23
sandeep

Il s'appelle le frère frère:

.selected + li {
   color: red;
}

Violon ici

Cependant, il n'y a pas de sélecteur frère pour l'élément précédent. La

6
Robert Smith

Cela devrait être fait avec JavaScript.

Si vous utilisez jQuery, cela peut être fait comme ceci:

$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');
2
Colin Kenney

Vous pouvez utiliser display: flex; et flex-direction: row-reverse; pour inverser la liste.

http://codepen.io/bscherer/pen/XMgpbb

1
captainpixel