Question

I want to simulate tabs such that the first word in a list entry always gets a fixed width. I do it like this:

<style>
.tabbed { float: left; width: 5em; }
</style>

<ul>
<li><span class='tabbed'>first</span> entry in my list</li>
<li><span class='tabbed'>second</span> list entry</li>
</ul>

the approach works relatively well except that if I want to do:

li { color: blue }

it applies the color (not surprisingly) to the <li> but not to the <span>. this means that I would have to:

.tabbed { color: blue }

which is not very DRY. In my case I’ve got a whole bunch of declarations for different classes of the list items so it’s cumbersome and ugly.

how does one deal with this?

Answer 1

By default the the span should be colored blue if the li is colored blue.

See http://jsfiddle.net/Q2UGE/ for an example

I think you must have some other CSS overriding it

In case you do have something else overriding it that you cant change, you can also enforce li .tabbed to inherit from it parent

li .tabbed { color: inherit }

See http://jsfiddle.net/Q2UGE/1/ for an example of that