I have a table which looks something like the following.

```
<table>
    <tr>
        <td class="selected plus"><a>+</a></td>
        <td><a class="minus">-</a></td>
    </tr>
</table>

```

I want that only the selected `td` is visible. My restrictions are to achieve this only through `CSS`. I am not able to alter the `HTML` or inject some kind of `JavaScript`.

This is what I come up with yet:

* position the selected `td` over the other
* expand the selected `td` to "displace" the other
* hide the not selected `td`

Unfortunately I was not successful with neither of those ideas, so do you guys have any idea how to achieve this?

Here is a jsfiddle to play around with: <http://jsfiddle.net/u6n7r/6/>

I would be happy with a cross browser solution, but IE9 support is mandatory.