[SOLVED] Make CSS To Not Apply To Child Tables

Make CSS To Not Apply To Child Tables

I have the following CSS and HTML

.comTable {
    width: 95%;
    cellpadding: 2px;
    margin: auto; 
    border-collapse: collapse;
}

.comTable td {
    text-align: left;         
}

.comTable td:first-child {
    text-align: right;            
    width: 25%;
}

<table id="tableMain" class="comTable"> 
    <tr>
        <td>
            Some texts 1                
        </td>
        <td>
            <table id="table2">
                <tr>
                    <td>
                        Some more texts
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            Some texts 2                
        </td>
        <td>
            <table id="table3">
                <tr>
                    <td>
                        Some more texts...
                    </td>
                    <td>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

The problem is that the comTable CSS class is applied to table2 and table3, such that the first column of table2 and table3 are also set to 25%. How can I make it so that .comTable td:first-child will only apply to tableMain? Please note that I have quite too many rows in tableMain so as much as possible I don't want to apply a class to each first td there.

Solution

You can do

.comTable > tr > td:first-child {
    text-align: right;            
    width: 25%;
}

to achieve the desired effect. > means that only first level children will be affected, and not children deep within.