Question

Common

table tr td
{
    vertical-align:middle;
}

Custom

table.custom tr td
{
    vertical-align:top;
}

When I use like this:

<table class="custom">
    <tr>
        <td>
            <table>
                <tr>
                    <td>this text align top, but I want to align middle
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

sub table behave like its parent. How can ignore parent element style?

Answer 1

One thing that you can do is adding the child selectors like so:

table.custom > tr > td { }

Then only the immediate children will match the style