add class to change position background image within div without javaScript [duplicate] - css

Question

This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 4 years ago.
I can not for the life of me figure out what seems so simple. And on top of that, I have this simple css problem which I can not figure out. :-)
I am trying to shift the position of a background image by changing the class. This does not have to happen within a single html file, and so javaScript is not involved.
This is like the classic "cropped toggle button" where the hover state moves the image a set number of pixels. However, it does not seem to work in this case.
In step1.html, my html looks like this:
<div id="progress" class="progress1">
<p>STEP 1/3 </p>
</div>
In step2.html, my html looks like this:
<div id="progress" class="progress2">
<p>STEP 2/3 </p>
</div>
Note the sole change is class="progress1" to class="progress2".
My css looks like this:
#progress{
position:relative;
display:block;
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
width:565px;
height:36px;
line-height:36px;
margin:1em 0;
}
.progress1{
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
}
.progress2{
background: url(../images/progressBar.png) 65px -36px no-repeat !important;
}
.progress3a{
background: url(../images/progressBar.png) 65px -72px no-repeat !important;
}
.progress3b{
background: url(../images/progressBar.png) 65px -108px no-repeat !important;
}
I have also tried add the full background declaration in the id, and only changing the position in the classes, like so: background-position: 65px -108px.

Answer 1

Try this:
#progress{
position:relative;
display:block;
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
width:565px;
height:36px;
line-height:36px;
margin:1em 0;
}
#progress.progress1{
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
}
#progress.progress2{
background: url(../images/progressBar.png) 65px -36px no-repeat !important;
}
#progress.progress3a{
background: url(../images/progressBar.png) 65px -72px no-repeat !important;
}
#progress.progress3b{
background: url(../images/progressBar.png) 65px -108px no-repeat !important;
}
The problem was that #progress selector was always higher specificity than .progress1 or .progress2 selector even with !important. So you need to keep the specificity on same "level" to be able to overwrite it with .progress1 or .progress2