Geek Answers Handbook

CSS nth-child not working

I know this question has been asked many times, but I still can not understand the problem, so this is my html:

<table class="UMLTable"> <tr> <th>Table<th> </tr> <tr> <td>Attribute 1<td> </tr> <tr> <td>Attribute 1<td> </tr> <tr> <td>Attribute 1<td> </tr> </tr> </table>

So why this line does not work:

 .UMLTable td:nth-child(even){ background-color:blue; }
+6
source share
3 answers

You need to select the nth tr element, not the child element of td .

Your selector should be:

 .UMLTable tr:nth-child(even) td { background-color:blue; }

The reason your CSS is not working as expected is because the td elements are not siblings.

 .UMLTable tr:nth-child(even) td { background-color: blue; } 
 <table class="UMLTable"> <tr> <th>Table <th> </tr> <tr> <td>Attribute 1 <td> </tr> <tr> <td>Attribute 1 <td> </tr> <tr> <td>Attribute 1 <td> </tr> </tr> </table>
+9
source

Try using the tr element instead of td like this:

 .UMLTable tr:nth-child(even) td { background-color:blue; }

JSFIDDLE DEMO

+1
source

Interesting because my code doesn't work just as well, although I used the tr element ...

 <style> .list tr:nth-child(even) { background: #E0DDF0; } </style> <table class="list"> <thead> <tr> <td align="left"><font color="#1E4262"><h2>List of books</h2></font></td> <td></td> </tr> <tr> <th style="width: 350px;"> Name </th> <th style="width: 110px;"> Writer </th> <th style="width: 110px;"> Date </th> <th colspan="5" style="width: 45px;"> Actions </th> </tr> </thead> {% for d in titles %} <tbody> <tr > <td class="listLeft" > {{ d.title | upper }} </td> <td> {{ d.idUser.name }} </td> <td> {{ d.dateCreation | date ('dm-Y') }} </td> </tr> </tbody> {% endfor %} </table>

Can anyone see please? Thanks.

0
source

More articles:


All Articles