"Inner" CSS Not Overriding "Outer" CSS

Question

I have some nested tables where there is one outer, container table, two column tables nested in the outer table, and then various tables stacked on each other in the columns. Here is the relevant HTML:

<table class="outer">
    <tr>
        <td>
            <table class="column" id="left_column">
                <tr>
                    <td>
                        <table class="cell" id="t1">
                            <tr><td><asp:Literal runat="server" ID="t1r2c0" /></td><td><asp:Literal runat="server" ID="t1r2c1" /></td><td class="image"><span id="s1" runat="server"><asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder></span></td><td><asp:Literal runat="server" ID="t1r2c3" /></td><td class="gray"><asp:Literal runat="server" ID="t1r2c4" /></td></tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t2">
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="column" id="rightColumn">
                <tr>
                    <td>
                        <table class="cell" id="t3">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t4">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t5">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t6">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t7">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t8">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="messages" id="t9">
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

And here is the relevant CSS:

.cell
{
border: none;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding: 2px;
}
.image
{
padding: 0;
margin: 0;
width: 65px;
}

My problem is that the image tds have a padding of 2px. My understanding was that the CSS for .image -- being more specific -- should override the CSS for ".cell td".

Any advice is appreciated.

You're looking at it wrong. Padding on a parent element cannot be overriden by a child element. The table cells will have 2px of padding, and the images will have none. — Marc B
– Marc B, Commented Jul 12, 2012 at 18:50
@MarcB: Actually, that's exactly what I am trying for -- to have padding around all of the table cells except for the images. — Kevin
– Kevin, Commented Jul 12, 2012 at 18:56

Gareth · Accepted Answer · 2012-07-12 18:57:57Z

2

Specificity isn't determined by how "deep" the elements are, but just by how explicit the selectors are.

The specificity score is based on

the number of ID selectors
otherwise, the number of class/attribute selectors
otherwise, the number of element selectors
- .cell td contains a class selector and an element selector
- .image contains a class selector and no element selectors

So, the first rule is more specific.

answered Jul 12, 2012 at 18:57

Gareth

139k36 gold badges152 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin Over a year ago

That's very clear. Thank you. But doesn't that mean that changing the CSS for .image to ".cell td .image" should work the way I am hoping?

Gareth Over a year ago

Yes, it does mean that. Unless you have other CSS getting in the way. In Chrome for example, if you "inspect" an element by right clicking on it, the right hand panel will list all CSS rules that match that element, with the most specific rule at the top

Collectives™ on Stack Overflow

"Inner" CSS Not Overriding "Outer" CSS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related