Trying to override Table Row settings

I'm using these rules

#MyTable tr:nth-child(odd) {
}

#MyTable tr:nth-child(even) {
}

I'm trying to put a table inside on开发者_如何学运维e of the rows:

#InnerTable {
}

But it seems to be inhereting the style of MyTable. How do I override The MyTable settings for my inner table so that it has no effect on InnerTable's style?

---

DEMO: http://jsfiddle.net/marcuswhybrow/PLyzK/

You could rewrite your existing rules to be more specific. Using the child selector you could have:

#MyTable > tr:nth-child(odd) {}
#MyTable > tr:nth-child(event) {}

This limits the rule to tr elements which are directly contained within an element with the id #MyTable. Then you can add specific rules for your #InnerTable as well:

#InnerTable > tr:nth-child(odd) {}
#InnerTable > tr:nth-child(event) {}

The E > F selector "Matches any F element that is a child of an element E" whereas the normal E F would "Match any F element that is a descendant of an E element".

Bare in mind that if your tr are in fact contained within a tbody element as they should be to create a valid table element,

<table id="MyTable">
    <tbody>
        <tr>
            ...
        </tr>
    </tbody>
</table>

The your rules would have to reflect this:

#MyTable > tbody > tr:nth-child(odd) {}
#MyTable > tbody > tr:nth-child(event) {}

#InnerTable > tbody > tr:nth-child(odd) {}
#InnerTable > tbody > tr:nth-child(event) {}

DEMO: http://jsfiddle.net/marcuswhybrow/PLyzK/

---

Or you could specifically reset all options in a rule applied later on (avoid if possible, since this leads to a lot of meaningless repetition):

#MyTable #SomeOtherTable tr:nth-child(odd) {
    some-property: the-default;
}

For more ideas on how to be more specific (reducing the set of elements your rules will apply to) check out the W3C documentation regarding selectors.

---

I found the answer! If you just try to specify a class for the td, it only works on every other row.. to make it work everywhere, in the css file, add the keyword !important for example:

.correct {
    background-color:#C9FDC1 !important}    
.incorrect {
    background-color:#FDB5B7 !important}

Do this at the bottom of your css file, after the nth child rule. The on your table, use td class="correct" or td class="incorrect"