Multiple CSS rules or jquery

Here is some "normal" code for sprite menu

#menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

#menu li.m1 a{ background-position:0px 0px; }
#menu li.m1 a:hover{ background-position:0px -55px; }
#menu li.m1 a.selected{ background-position:0px -55px; }

I have 6 different item, that will require 6 different class x 3 for hover

It's a can be done EASILY with jQuery in 2-3 lines, but having to load a library for something simple as that... not sure it worth it...

So, YOU will go with the jQuery method, or just copy paste as many css rule as need....

Just making thing over and over again, make me thing there is 开发者_开发知识库a better way !

Use CSS and use a class instead of an ID. Then you don't need to duplicate:

.menu li a
{
    background:url('../layout/menu.jpg') no-repeat;
    display:block;
    text-decoration: none;
    width:100%; height:100%; 
}

.menu li.m1 a{ background-position:0px 0px; }
.menu li.m1 a:hover{ background-position:0px -55px; }
.menu li.m1 a.selected{ background-position:0px -55px; }

@GenericTypeTea has the right answer here. But you could make your css smaller by one, maybe two lines by

a) combining .menu li.m1 a:hover and .menu li.m1 a.selected like so

.menu li.m1 a:hover, .menu li.m1 a.selected{ background-position:0px -55px; }

and

b) possibly removing .menu li.m1 a{ background-position:0px 0px; }

Assuming .m1 is the only class for menu and that 0 0 is the default position for the background might make this line unnecessary.