Question

I have a question regarding CSS and how to bequeath background information within an unordered list.

I have a footer in that I would like to show different flags. there I have a footer class

 <ul class="flag">
     <li id="de"></li>
  </ul>

.flag consists of:

.footer #legals #list2 .flag{
    width: 20px;
    height: 10px;
    display: inline-block;
    float:left;
    margin-top: 16px;
    margin-left: 15px;
    background-image:url(../images/flags.png);
}
.footer #legals #list2 .flag #de{   
    background-position: -40px;
}
.footer #legals #list2 .flag #en{
    background-position: -20px;
}
.footer #legals #list2 .flag #en_us{
    background-position: -20px;
}

So I thought it would be easier for each flag just to change the entry background-position.
But for some reason this is not working and I dont know why? I also tried to use instead of li id div id but it is still the same.

If there is someone who could help me out I really would appreciate it.

Answer 1

The background-image is set on the <ul> instead of the <li>. If you change that first selector from

.footer #legals #list2 .flag  

to

.footer #legals #list2 .flag li  

then the <li> will actually have a background-image to position.