CSS Sprite - is there a possible short way?

Question

E.g. I hava a 3 diffrent image as a sprite with hover.

<div class="sprite normal"></div>

i dont want this type!

/* small */
    .small{ width:20px; height:20px; }
    .small .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; }
/* normal*/
    .normal{ width:50px; height:50px; }
    .normal .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; }
/* big */
    .big{ width:100px; height:100px; }
    .big .sprite{ background:url(sprite.png) 0 0 no-repeat; }
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }

is there a short way? thank you..

Answer 1

.sprite{ background:url(sprite.png) 0 0 no-repeat; }

/* small */
    .small{ width:20px; height:20px; }
    .small .sprite:hover { background:url(sprite.png) 20px 0 no-repeat; }

/* normal*/
    .normal{ width:50px; height:50px; }
    .normal .sprite:hover { background:url(sprite.png) 50px 0 no-repeat; }

/* big */
    .big{ width:100px; height:100px; }
    .big .sprite:hover { background:url(sprite.png) 100px 0 no-repeat; }