CSS problem - an element only works if it has no parent (using jquery)

Question

I have this code:

CSS

.taglist 
{
    float:left;
    margin-left:30px;
}
.taglist ul 
{
    overflow:auto;
    list-style-type:none;
    border:1px solid #999;
    background:#ccc;
    padding:20px;
    min-height:150px;
    max-height:150px;
    width:100px;
}

.taglist li
{
    display:block;
    border:1px solid #999;
    background:#fff;
    width:80px;
    padding:5px 10px;
    margin-bottom:5px;
}
.tag_selected {
    background:#ffc;
}

HTML:

<div class="taglist">
    <ul id="list1">
        <li id="1">1</li>
    </ul>
</div>

Now I am using jQuery for this ... therefore, when an item is selected in the list, it should change its class to tag_selected.

The problem is that it only works if I delete the ".taglist" before ul and li css, and I don't want to do this because I want the style to be only in the div taglist.

i'v tried every combination like ".taglist tag_selected", ".taglist ul li tg_selected" etc., but nothing works !!

What can I do?

btw by trying this line:

<li class="tag_selected" id="1">1</li>

gave the same result, no change that ever.

Thanks in advance!

Answer 1

CSS.

.taglist ul .taglist li , .tag_selected, , .taglist li.

.taglist li.tag_selected {
    background:#ffc;
}

( ), , . - , 1s, 10 , 100.

• li - 1
• .taglist - 10
• .taglist li - 11
• li#myId - 101
• div.taglist li.tag_selected - 22

. http://htmldog.com/guides/cssadvanced/specificity/ "css" Google.