Question

Apologize for the length of the code. I’m trying to hide the three cells that contain the $ I can’t change the html but I can change the CSS. I’ve tried:

.extra-details table:nth-child(1) tr:nth-child(-n+4)

but that gets the first 4 rows in the second table as well. So my question is this, is there CSS I can use to hide the cell/rows that have the $ or suggestions on something to search for? cell values have been removed for brevity.

<div class="details_column">
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                       Price
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                        $
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="column">
        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium ">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td class="medium">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

In a single line the CSS to select just the <td> containing $ elements would be:

div.column:first-child table tr:nth-child(-n+4):not(:nth-child(1)) td:last-child {
    border:2px dashed red;
}

as demonstrated in this fiddle. However, please note that this is only tested in Chrome.