Selecting CSS clas based on ID AND Class?

Question

I have 5 menu items, and a background that is repeated on the image 5 times which uses background-position:0 -60px to give the "selected" effect.

To select which part of the image is used, I am trying to use a class with a number, but it doesn't seem to work.

(Sorry this was hard for me to explain)

JSFIDDLE: http://jsfiddle.net/G4mLB/

HTML: (Class=3 is suppose to be the 3rd page)

<div id="menu" class="3">

CSS:

#menu {
    position:absolute;
    top:104px;
    left:0;
    height:60px;
    width:523px;
    background-image:url('http://kitoit.com/new/img/menu-buttons.png');
}
#menu .1 {
    background-position:0 0px;
}
#menu .2 {
    background-position:0 -60px;
}
#menu .3 {
    background-position:0 -120px;
}
#menu .4 {
    background-position:0 -180px;
}
#menu .5 {
    background-position:0 -240px;
}

That should work, but what's wrong with `class="menux"` for each `x`? — OJFord, Feb 13 '14 at 17:14
Because I would have to add everything under #menu to each one. — MRC, Feb 13 '14 at 17:15
@OllieFord Also, in the fiddle you will see its not working. — MRC, Feb 13 '14 at 17:16

score 4 · Accepted Answer · edited May 23 '17 at 12:29

4

You have invalid class names, they can't start with number - see this answer, especialy:

Basically, a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers.

To fix your issue, name them for example itemX and use it like this (note that i remove space between #menu and .item3):

#menu.item3 {
   background-position:0 -120px;
}
...
<div id="menu" class="item3">

See this JSFiddle with working example.

edited May 23 '17 at 12:29

Community

1
1

answered Feb 13 '14 at 17:17

Pavel Štěrba

2,822
2
28
50

Thank you I see now. Also need to remove the space between #menu and .item3 – MRC Feb 13 '14 at 17:20
Yes, I add this to my answer right now, just refresh it. – Pavel Štěrba Feb 13 '14 at 17:21
1

@Joey if my answer help you, consider to mark it and close this question. – Pavel Štěrba Feb 14 '14 at 11:04

score 1 · Answer 2 · answered Feb 13 '14 at 17:25

Instead of number us letter and change css like this

JSFIDDLE: http://jsfiddle.net/G4mLB/14/

css

#menu {
  position:absolute;
  top:104px;
  left:0;
  height:60px;
  width:525px;
  background-image:url('http://kitoit.com/new/img/menu-buttons.png');
}

div.one {
 background-position:0 0px;
}
div.two {
 background-position:0 -60px;
}

div.thr {
 background-position:0 -120px;
}

div.four {
background-position:0 -180px;
}

div.five {
background-position:0 -240px;
}

Selecting CSS clas based on ID AND Class?

2 Answers2