как применить правило css к предыдущему и следующему элементу в HTML?
например:
у вас есть это:
<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;
}
это возможно?
4 ответов
это невозможно с чистым css. Вы можете создать следующий, но не предыдущий элемент.
но вы можете сделать трюк с CSS. Вместо того, чтобы дать класс избранные вы можете дать класс элемент. Вот так:
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;
}
проверьте это http://jsfiddle.net/S5kUM/2/
это называется селектор sibling:
.selected + li {
color: red;
}
Скрипка здесь
однако для предыдущего элемента нет селектора брата.
Это должно быть сделано с помощью JavaScript.
Если вы используете jQuery, это можно сделать следующим образом:
$('.selected').prev().css('color', 'red');
$('.selected').next().css('color', 'green');