Я нашел способ сфокусировать всех предыдущих братьев и сестер (напротив ~
), которые могут работать в зависимости от того, что вам нужно.
Допустим, у вас есть список ссылок и при падении на одном, все предыдущие должны стать красными. Вы можете сделать это следующим образом:
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}
<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>