Stack Overflow Asked by Raj Kumar Boddu on December 7, 2021
I have a table as below. I need to apply alternate colours starting from 2nd row. When I’m using nth-child selector to differentiate odd and even rows, the 1st row is being considered which isn’t fulfilling the requirement.
So, how can we write a selector that ignores 1st row and starts applying colours from 2nd row considering 2nd row as odd row?
I know we can apply colour of odd row to even row and vice versa as a work around but some what it is confusing when we look at the code. So, I’m looking for an alternate solution for this table structure below. I appreciate your help. Thanks.
<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>
table > tbody tr:nth-child(2n+1) > td{
background-color: #eee;
}
table > tbody > tr:first-child > td{
background-color: #006c00;
}
table > tbody > tr:nth-child(2n + 2) > td{
background-color: #d8e4bc;
}
Answered by Codrey on December 7, 2021
You could use the nth-child() selector in combination with the not() selector.
tr:nth-child(2n + 1):not(:nth-child(1)) {
background: red;
}
Answered by Robert Cooper on December 7, 2021
Will this work for you. Target first row separatly
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
tr:first-child {
background-color: yellow;
}<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>Answered by kiranvj on December 7, 2021
You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>Another way to achieve is separating <thead> and <tbody>.
tbody tr:nth-child(even) {background: #CCC}
tbody tr:nth-child(odd) {background: green}<table>
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>Answered by aviboy2006 on December 7, 2021
You can use :nth-child() selector. Also, if you are using <th> elements, you can put them in a <thead>.
tbody tr:nth-child(2n) {
background: peachpuff;
}<table>
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
</tr>
</tbody>
</table>If you don't want to alter your markup, you can start from the 3rd index.
tr:nth-child(2n+3) {
background: moccasin;
}<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
</tr>
</tbody>
</table>Answered by ksav on December 7, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP