CODEWITHSUNDEEP
htmlcss
Nicholas
Nicholas

Reputation: 2058

Why is parent class overriding the child class

Assume the following code:

<style>
    .child      {border:0px solid #000; border-spacing:0px;}
    .child td   {border:0px solid #000; }
    .child th   {border:0px solid #000; }

    .parent     {border:1px solid #000; border-spacing:0px;}
    .parent td  {border:1px solid #000; }
    .parent th  {border:1px solid #000; }
</style>


<table class="parent">
    <tr>
        <th>title</th>
    </tr>
    <tr>
        <td>stuff</td>
    </tr>
    <tr>
        <td>
            <table class="child">
                <tr>
                    <th>Name: </th>
                    <td><input name="Name" value="stuff"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

My understanding of CSS inheritance is that the elements in the child table will have no border, because they will look for the closest styled parent and inherent the specifics of that class. However, in this example the child table is showing a border on the th and td elements (though not on the table itself). This indicates that the child class is working correctly for the table, but that it is not propogating to the child elements.

Is this intended? What is the proper way around this?

Upvotes: 0

Views: 100

Answers (2)

NoobEditor
NoobEditor

Reputation: 15891

Your CSS will will target all td and th in case of parent class.This is completely expected behaviour.

when you do not target specific class, then for any class, most relevant css is applied - this happens with the last most applicable rule found in the styling definition and same is applied...

What you have mentioned to be done, can be achieved through targeting the direct descendent of class, something like this :

    .parent {
        border:1px solid #000;
        border-spacing:0px;
    }
    .parent > td { /* > will ensure only td of parent class is targeted */
        border:1px solid #000;
    }
    .parent > th {
        border:1px solid #000;
    }

fiddle with direct descendant

demo of orginal

Update

To answer your query in comment, change the order of CSS declaration

Fiddle Demo

CSS changed colors for better understanding

.parent {
    border:1px solid #000;
    border-spacing:0px;
}
.parent tr > td {
    border:1px solid red;
}
.parent tr > th {
    border:1px solid yellow;
}
.child {
    border:1px solid blue;
    border-spacing:0px;
}
.child tr > td {
    border:0px solid #000;
}
.child tr > th {
    border:0px solid #000;
}

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105903

Both of your selectors have the same weight, so the last one read in the stylesheet is applied :

http://www.w3.org/TR/CSS2/cascade.html#specificity

For you, there is :

.class td { ...}
.class td { ...} /* wich overwrite previous rule */

You need to increase weight or specifity of your selectors :)

http://www.w3.org/TR/CSS2/selector.html

It could be either:

.parent .child      {border:0px solid #000; border-spacing:0px;}
table .child td   {border:0px solid #000; }
table table.child th   {border:0px solid #000; }
table.child      {border:0px solid #000; border-spacing:0px;}
table td > .child td   {border:0px solid #000; }
.child > th   {border:0px solid #000; }
table.parent .child      {border:0px solid #000; border-spacing:0px;}
table.parent .child td   {border:0px solid #000; }
td > .child th   {border:0px solid #000; }

Upvotes: 1

Related Questions