CSS style for first table column except first cell of that column

Question

So here is the <table>:

<table class='census'>
    <tr>
        <th colspan="2">My Title</th>
    </tr>
    <tr>
        <td colspan="2" class='chart'><SOME PIE CHART, GENERATED WITH JS></td>
    </tr>
    <tr>
        <td>Some title</td>
        <td>Some Data</td>
    </tr>
    <tr>
        <td>Some title</td>
        <td>Some Data</td>
    </tr>
    <tr>
        <td>Some title</td>
        <td>Some Data</td>
    </tr>
    <tr>
        <td>Some title</td>
        <td>Some Data</td>
    </tr>
    <tr>
        <td>Some title</td>
        <td>Some Data</td>
    </tr>
</table>

I need to set fixed width for the first column. It could easily be done:

.census td:first-child {
    background-color: #F0F8FE;
    width: 250px;
}

Now the problem! Fixed width screws with JS PIE CHART.

So i need to apply fixed width to all first <td> tags except one with colspan="2" that will contain my chart.

The only thing i could come up with (so far) if this:

.census td:first-child:not(.chart) {
    background-color: #F0F8FE;
    width: 250px;
}

It brings me unexpected results in all browsers. I'm lost at this point.

Answer 1

Can you not just override it be putting the chart class after it e.g.

   .census td:first-child {
        background-color: #F0F8FE;
        width: 250px;
    }

    .census td.chart {
      width: auto;
      etc...
    }