How to reference ul element inside a div? - html

Question

I have a HTML structure like this:
<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>
And I apply a CSS like this, and it works fine:
#main_tabs_nav li.sn1 a {
width: 107px;
background: transparent url("http://i.imgur.com/someimage.png") 0 0 no-repeat;
text-indent: -9999px;
}
But this does not work:
#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;
}
How do I get the second piece of CSS code to work too ?
I want to put #main_tabs in the start of the CSS too, to strictly follow the hierarchy ..

Answer 1

There is nothing wrong with your HTML and CSS. Both of these CSS styles work from a hierarchical standpoint. You can see that I added in another style to turn the first link red using the #main_tabs as the parent, and it is working fine here.
If you are looking to do text replacement, I would use this method instead:
li.sn1 a {
text-indent: 100%;
white-space: no-wrap;
overflow: hidden;
}