CODEWITHSUNDEEP
htmlcss
navig8tr
navig8tr

Reputation: 1844

Override first-child in CSS class with another class

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;
}

Upvotes: 2

Views: 3482

Answers (2)

user663031
user663031

Reputation:

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/

Upvotes: 1

Norman Breau
Norman Breau

Reputation: 2417

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?

Upvotes: 1

Related Questions