Как ссылаться на элемент ul внутри div?

Question

У меня есть HTML-структуру, как это:

<div id="main_tabs"> 
    <ul id="main_tabs_nav"> 
     <li class="sn1"><a id="divleftlink0" rel="nofollow" href="javascript:divActivate(0,2,'divleft');" class="active">Newsletter</a> 
     </li> 
     <li class="sn2"><a id="divleftlink1" rel="nofollow" href="javascript:divActivate(1,2,'divleft');" class="inactive">Get Social</a> 
     </li> 
     <li class="sn3"><a id="divleftlink2" rel="nofollow" href="javascript:divActivate(2,2,'divleft');" class="inactive">Testimonials</a> 
     </li> 
    </ul> 
</div> 

И я применяю CSS, как это, и он работает отлично:

#main_tabs_nav li.sn1 a { 
width: 107px; 
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat; 
text-indent: -9999px; 
} 

Но это не работает:

#main_tabs #main_tabs_nav li.sn1 a { 
width: 107px; 
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat; 
text-indent: -9999px; 
} 

Как мне заставить вторую часть кода CSS работать тоже?

Я хочу поставить #main_tabs в начале CSS тоже, строго следуют иерархии ..

Answer 1

Там нет ничего плохого с HTML и CSS. Оба эти стили CSS работают с иерархической точки зрения. Вы можете видеть, что я добавил в другом стиле, чтобы повернуть первую ссылку красным, используя #main_tabs в качестве родителя, и работает нормально here.

Если вы хотите сделать замену текста, я хотел бы использовать этот метод вместо:

li.sn1 a { 
    text-indent: 100%; 
    white-space: no-wrap; 
    overflow: hidden; 
}