css background change for tr

Question

I want to give good background effect to rows using this css

tr:hover td{background-color:#ddd; }

imagine a table inside a table, naturally all td's inside, also effected by this css. How can I prevent?

<table
    <tr
        <td -->color change is good
    <tr
        <td
            <table
                <tr
                    <td --> color change is bad

I tried using

form>table>tr:hover td still same
form>table>tr:hover>td not working at all

thanks for help

Answer 1

Use this to style only your outer tds on hover.

form > table > tbody > tr:hover > td {
    background-color: #ddd;
}

Notice the tbody selector. See this answer for why it's needed.

Answer 2

Use a second selector:

tr:hover table td { background-color: black; } /*change to default*/