.one{width:200px;background:#666;}
.two{border:10px solid #f00;}

<div class=one two></div>

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> item 1</a> </li>
</ul>
</div>

div#subnav ul { /* some styling */ }
div#subnav ul li.subnavitem { /* some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* some styling */ }
div#subnav ul li.subnavitemselected { /* some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* some styling */ }

<ul id=subnav>
<li> <a href=#> item 1</a> </li>
<li class=sel> <a href=#> item 1</a> </li>
<li> <a href=#> item 1</a> </li>
</ul>

#subnav { /* some styling */ }
#subnav li { /* some styling */ }
#subnav a { /* some styling */ }
#subnav .sel { /* some styling */ }
#subnav .sel a { /* some styling */ }