Rating with float right or direction rtl properties

dabblet.css

/**
 * Rating with float right or direction rtl properties
 */
h1 {
	text-align: center;
	font-family: Helvetica, Arial;
	font-weight: normal;
	color: #777;
	font-size: 1.3em;
	clear: both;
}
div + h1 {
	padding-top: 4em;
}
.rating {
	width: 245px;
	margin: 0 auto 1em;
	font-size: 3em;	
}
.rating a {
	float:right;
	color: #aaa;
	text-decoration: none;
	transition: color .4s;
}
.rating a:hover,
.rating a:hover ~ a {
	color: orange;
	cursor: pointer;
}
.rating2 {
	direction: rtl;
}
.rating2 a {
	float:none
}

dabblet.html

<h1>Rating with float:right; and general siblings selector</h1>
<div class="rating">
<a href="#5" title="Give 5 stars">☆</a><a href="#4" title="Give 4 stars">☆</a><a href="#3" title="Give 3 stars">☆</a><a href="#2" title="Give 2 stars">☆</a><a href="#1" title="Give 1 star">☆</a>
</div>

<h1>Rating with direction:rtl and general siblings selector</h1>
<div class="rating rating2">
	<a href="#5" title="Give 5 stars">★</a><a href="#4" title="Give 4 stars">★</a><a href="#3" title="Give 3 stars">★</a><a href="#2" title="Give 2 stars">★</a><a href="#1" title="Give 1 star">★</a>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}