Css styling to specific number of child

Question

I have one table, I want to apply css to 5th number of child then 10th number of child the 15th, 20th and so on so that 1st 5 rows looks to be one section then another 5 rows looks different section. What should I do for this. I have below mentioned code.

 table{ background:#fff; width:100% } td{ padding:5px; } table tr:nth-child(5) td{border-bottom:1px solid red} table tr:nth-child(10) td{border-bottom:1px solid red} 

 <table colspan="0" celspacing="0"> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr><tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr><tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> </table> 

In my local code rows are coming dynamically and I don't know how many rows will come so I want to apply css to 5th multiple of child using css. Please help.

Answer 1

You can try this. The multiplicy is 10, so for each 10 element you style only 5 (the last ones from 6 to 10 or the first ones from 1 to 5). With this configuration you will have them different 5 by 5.

 table { background: #fff; width: 100% } td { padding: 5px; } table tr:nth-child(10n+6) td, table tr:nth-child(10n+7) td, table tr:nth-child(10n+8) td, table tr:nth-child(10n+9) td, table tr:nth-child(10n+10) td { background: #f2f2f5; color: red; } 

 <table colspan="0" celspacing="0"> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> <tr> <td>2232</td> </tr> </table> 

Answer 2

您应该能够使CSS规则

table tr:nth-child(5n) td{border-bottom:1px solid red}