Search code examples
htmlcsscss-tables

Confusing table CSS

I have a CSS element describing a table, it contains this line:

.pricing tr td:last-child { text-align: right; }

Which makes the text in the last column align to the right. The pricing class is the class of the table I'm trying to edit. I haven't really been able to figure out or find anywhere the rules for listing table tags in CSS. If I put:

table .pricing tr td:last-child { text-align: right; }

or

.pricing table tr td:last-child { text-align: right; }

Then this line doesn't work. However, if I put:

table.pricing tr td:last-child { text-align: right; }

Then it does work.

What makes it even more confusing, is that I'm editing the CSS of a theme, and it has these lines:

table caption { font-weight: bold; text-align: left; padding: 4px 6px; border: 1px solid #ddd; border-bottom: 0; background: #ffd53c url(img/pattern.png); }

table th, table td { padding-left: 6px; padding-right: 6px; line-height: 21px; border: 1px solid #ddd; background-color: #fff; text-align: left; vertical-align: middle; }

table th, table tfoot td { font-weight: bold; background: #eee url(img/pattern.png); }

table tfoot a { text-decoration: none; }

table .alternate td { background-color: #fafafa; }

table.large th,table.large td { padding: 12px 8px; }

I just want to figure out a rule, when to put table, when not to put table, whether I have to write tr td or just td, where do I put the class selector (before everything, in the middle, with or without table, etc).

My HTML is very simple, just this: 

<table class="pricing">
  <tr> <th>Codes </th> </tr>
  <tr> <td>The Constitution of the Russian Federation (adopted at National Voting on December 12, 1993)</td> <td>£34.00</td> </tr>
Solution

  • if this selector works

    table.pricing tr td:last-child

    it means that your table has a pricing class, so it's quite obvious that

    table .pricing tr td:last-child

    cannot work (because you're looking for children between table and tr (e.g. tbody/thead/tfoot) with class pricing and this rule

    .pricing table tr td:last-child

    looks for a table contained into an element with parent class. These are definitely three different rules

    The need to specify an element/class in your selectors, depends on how much specific your rule must be, if you have to override a previous rule or not. As a thumb rule I'd suggest you to begin defining simpler (shorter) rules and increase their specificity until the style is not applied.