Override first-child in CSS class with another class

Question

In a web page we have a table nested within another table. In our CSS class first-child is used to give the first row a blue background. How can I prevent this blue background from being inherited by the nested table.

Also please note that I cannot alter the original styles.

Here is the JSFiddle: https://jsfiddle.net/a0muwsk1/

The last CSS block, .Main table table td, was one attempt at overriding the first-child styling...It did not work.

And here is the same code from the fiddle page:

Html:

<table class="Main">
    <tr>
        <td>This</td>
        <td>is</td>
        <td>first</td>
        <td>child</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Regular</td>
        <td>Row</td>
        <td>
            <table>
                <tr>
                    <td>Nested</td>
                    <td>first</td>
                    <td>child</td>
                </tr>
                <tr>
                    <td>Nested</td>
                    <td>Table</td>
                    <td>Row</td>
                </tr>
            </table>
        </td>        
    </tr>
</table>

CSS:

.Main table
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.Main tr:first-child td
{
    background-color: blue;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-family: Arial;
    font-weight: bold;
    color: white;
}

.Main td
{
    border: 1px solid black;
    text-align: center;
    font-family: Arial;
    color: black;
}

.Main table table td
{
    border: 1px solid black;
    text-align: center;
    font-family: Arial;
    color: black;
}

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

You can use the direct child selector. .element > .childElement

So your CSS will look something like this

.Main > tbody > tr:first-child td
{
    background-color: blue;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-family: Arial;
    font-weight: bold;
    color: white;
}

Here is the JSFiddle: https://jsfiddle.net/a0muwsk1/3/

Edit:

I forgot about some table magic. Browsers implicitly add a tbody element to table elements. This answer explains more about the browser magic. Why doesn't table > tr > td work when using the child selector?

edited May 23 '17 at 11:53

Community

1
1

answered May 11 '15 at 02:21

Norman Breau

2,132
16
35

The outer table should retain the first-child styling. It's first row should be blue. – navig8tr May 11 '15 at 02:22
Although, I could add another style for `` and use that instead of first child ``... No this will not work because it will affect all pages on the site. – navig8tr May 11 '15 at 02:26
@navig8tr I've corrected my answer. Tables like to behave very differently than your typical element. – Norman Breau May 11 '15 at 02:34

score 1 · Accepted Answer · 2015-05-11T03:29:16.627

You were close, but your attempt using

.Main table table td

refers to a table inside a table inside a table--one too many nesting levels. You meant to write:

.Main table td

However this rule will have lower specificity than the existing

.Main tr:first-child td

To avoid this problem, you can write it an a way parallel to the origin rule, including the tr:first-child part:

.Main table tr:first-child td

which will have greater specificity. See this specificity calculator: http://specificity.keegan.st/

This says in English

But if the td is in the tr:first-child inside a table which is itself inside .Main (the top-level table), then do not apply the previous rule making it blue, instead, make it transparent or something else.

Fiddle: https://jsfiddle.net/torazaburo/a0muwsk1/6/

Override first-child in CSS class with another class

2 Answers2