Звездный рейтинг на CSS

Звездный рейтинг один из тех, скажем, блоков, который каждый использовал в том или ином проекте. У меня была идея создать ту часть, которая взаимодействует с пользователем, при очень небольшом коде и без JavaScript.

Для отображения звезды будем использовать десятичный код символа звезды в HTML, а именно: ☆.

HTML

<div class="rating">
<span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span>
</div>

Нам потребуется, при наведении мышки на соответствующую звездочку, впихнуть в "полую" звезду сплошную желтую звезду. Легко: просто положите сплошную звезду, используя псевдоэлемент, поверх полой звезды.

CSS

.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

Абсолютно позиционируем сплошную звезду и, таким образом, наша звезда закроет собой полую звезду.

Но пока у нас все работает только для каждой конкретной звезды. А наша задача, для лучшего взаимодействия с пользователем, заполнять все звезды (исходя из того, на какую звезду наведет мышку). Например, если пользователь наведет мышку на 4-ю звезду, то необходимо отобразить 4 звезды, если на 5, то 5 и т.д.

Посредством CSS нет возможности выбрать предыдущий соседний элемент. Однако есть способ выбрать следующие дочерние элементы, через родственный комбинатор.

Если мы буквально перевернем символы в обратном порядке (в этом нам поможет сниппет - переворачиваем текст), то затем мы сможем использовать родственный комбинатор, чтобы выбрать все звезды, которые появляются перед звездой, на которую наведена мышь, но после в HTML.

CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Вот мы и создали дружелюбный к пользователю шаблон звездного рейтинга при использовании небольшого кода. Ниже приведен полный код CSS для работы рейтинга:

CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Фактическое использование

Вероятнее всего, без участия javascript обойтись не получится. Когда пользователь кликает по звезде, ajax отправляется запрос к серверу и виджет получает класс, через который отображается выбранное количество звезд. Неужели нельзя опереться на javascript, если он повсеместно используется на сайте, для реализации такой звездной системы? Если ваше приложение полностью зависит от javascript, то такой вариант безусловно подойдет. Но, если ваш сайт должен работать и без использования javascript, то для такого звездного рейтинга потребуется гораздо больше работы. Вы можете посмотреть пример Lea Verous, который использует радио-кнопки, как часть формы, и где не используется javascript.

css-tricks.com/star-ratings