Affecting a series of (recursive) elements with css

Many sites use some form of rating system for content – here is an example of how to create series of elements for a ranking meter using only html and css.

HTML

<div id="stars">
  <div class="star">
    <div class="star">
      <div class="star">
        <div class="star">
          <div id="innermost" class="star">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.star {
  display:block;
  width:20px;
  height:20px;
  margin:0px;
  padding-left:20px;
  background:#00f;
  border-left:1px solid #f00;
}
#innermost {padding-left:0px;}
#stars .star:hover{background:#ff0;}

Live Demo hereĀ http://jsfiddle.net/MpmMa/

This entry was posted in Web Development and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>