2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Kevin
  • 1,252
  • 6
  • 32
  • 50
  • 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 Jul 12 '12 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 Jul 12 '12 at 18:56

1 Answers1

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

  1. the number of ID selectors
  2. otherwise, the number of class/attribute selectors

  3. 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.

Gareth
  • 133,157
  • 36
  • 148
  • 157
  • 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? – Kevin Jul 12 '12 at 19:10
  • 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 – Gareth Jul 13 '12 at 11:34