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
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 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.
Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. Perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected....
well done and this also and it even better than my idea ad use a less code
have a nice day
Thanks! Have a nice day too!