К сожалению, нет «предыдущего» селектора, но вы можете , возможно, получить тот же эффект, используя позиционирование (например, float right). Это зависит от того, что вы пытаетесь сделать.
В моем случае я хотел получить первую 5-звездочную рейтинговую систему CSS. Мне нужно было бы покрасить (или поменять значок) предыдущих звезд. Если плавать каждый элемент вправо, я по сути получаю тот же эффект (html для звезд, таким образом, должен быть записан «назад»).
Я использую FontAwesome в этом примере и заменяю между юникодами fa -star-o и fa-star http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML: (40)