Help with styling table

I’m doing this exercise and have met some problem.

This is relevant html part.

<tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>

I’m trying to make th aligns right and td aligns left.
So I write style in this way:

tfoot th{
       text-align: right;
}
tfoot td{
       text-align: left;
}

But it doesn’t work. I wonder why.

Hello @notAcat

hope that everything going fine with you

do you mind if you share your code in https://codepen.io or https://jsfiddle.net/

thanks and have a nice day

No problem.

codepen

Thank you!

I think I know the reason now. Specificity.
:nth-child is pseudo class, which is more specific than element.

excellent @notAcat

i used the following update to your code

thead th:nth-child(2),tbody td:nth-child(2),thead th:nth-child(3),tbody td:nth-child(3){
text-align: right;
}

thead th:nth-child(1),tbody th:nth-child(1),tbody td:nth-child(1),thead th:nth-child(4),tbody td:nth-child(4){
text-align: left;
}

then your tfoot tr rule will work fine

hope that help and have a nice day

another thing to help you cause i get cought by those error sometime is to inspect the item to see is your selector apply to it or no and also to see if there to rule competing to each other and one overrule the other one and ofcourse my million misstype error :slight_smile: that’s why i like to use IDE or text editor to help me

have a nice day

Or I can change the tfoot rule

tfoot tr :nth-child(1){
text-align: right;
}
tfoot tr :nth-child(2){
text-align: left;
}

I understand what you said about CSS debugging tricks. MDN happens to have one chapter too.

well done and this also and it even better than my idea ad use a less code

have a nice day :slight_smile:

Thanks! Have a nice day too!

you welcome and thanks