0

This is my first post and I don't know how to structure the code any differently.

First off everything displays fine and if I have 22 different ids it would validate fine too.

In my table, the column is styled by nth child to align everything centre.

If I class the TD, then the class gets overridden by the TR nth child

So I have currently this HTML

<td colspan="2" id="statsdiv">Total of Houses&#46;&#46;</td>

And this CSS

  #statsdiv {text-align:right;}
.table1861 tr td:first-child {
    text-align:center;
}

I have 355 rows in the table, and 22 need to be aligned to the right hand side. Surely I don't need to have the same ID with 22 different suffixes

Thank you

2 Answers2

0

Like Harry mentioned in the comments

The rule

.table1861 tr td:first-child {
   text-align:center;
}

will never overwrite

#statsdiv {text-align:right;}

Cause the ID is a more specific identifier. More details on CSS specificity can be found here

So probably you didn't show all the IDs and classes in your example thats why you might really face the problem you are saying in your question.

To answer the other part of your question though: Yes just adding a class instead of an id like:

<td colspan="2" class="align-right">Total of Houses&#46;&#46;</td>

should work:

 .table1861 tr td.align-right {text-align:right;}

But you might want to have a look at calculating a selector's specificity to not run into any issues

Community
  • 1
  • 1
caramba
  • 21,963
  • 19
  • 86
  • 127
  • The first part isn't correct. The `id` selector would have 100 whereas the `:first-child` has only 022 specificity but rest is correct. – Harry Feb 01 '17 at 15:26
  • @Harry thank you for your comment. What do you mean with `100` and `022` – caramba Feb 01 '17 at 15:30
  • Ooops, sorry I thought you'd know that @caramba. I was referring to the concatenated values of a-b-c that is mentioned in the specs here - https://www.w3.org/TR/selectors/#specificity. – Harry Feb 01 '17 at 15:34
  • 1
    @Harry Thank you for that awesome resource! I didn't know it soo exactly how to calculate specificity.. I will update my answer – caramba Feb 01 '17 at 15:43
  • @Harry why is :first-child `022`? I just get `013`!? correct ? – caramba Feb 01 '17 at 15:58
  • 1
    Because `tr`, `td` are element selectors (so c = 2), `.table1861` is a class selector and `:first-child` is a pseudo-class (so b = 2). – Harry Feb 01 '17 at 16:00
-1

Change your ID to a class, and then in your css for the class use the !important selector after you align right, this will make it take priority.

Callum.
  • 146
  • 12