CODEWITHSUNDEEP
htmlcss
MRC
MRC

Reputation: 553

Selecting CSS clas based on ID AND Class?

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;
}

Upvotes: 1

Views: 46

Answers (2)

Milad
Milad

Reputation: 859

  1. 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;
}

Upvotes: 1

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

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.

Upvotes: 4

Related Questions