CSS Target 2nd td on the first 3 rows only - css

Question

Okay so i got a really specific css i need to set for the first 3 rows and only on the 2nd td of those 3 rows. is there anyway to target only them in css rules?
right now i am trying like this
here is the render
<tr className={getRowColor(props, l, i)}>
<td>{i + 1}</td>
<td className="info-table-cell{l.info}</td>
</tr>
and here it is the second td in this row that i want to target for the first 3 rows only. And right now i try like this
.info-table-cell td:nth-child(1) {
background-color: #FFF45E;
}
.info-table-cell td:nth-child(2) {
background-color: #DCDCDC;
}
.info-table-cell td:nth-child(3) {
background-color: #FFC933;
}
but that does nothing. Anyone who knows how to do this?

Answer 1

Hope this helps you. I have added a red background color for nd td of first 3 rows. Try it:
table {
width: 100%;
}
table tr td {
border: 1px solid #000;
}
table tr:first-child td:nth-child(2),
table tr:nth-child(2) td:nth-child(2),
table tr:nth-child(3) td:nth-child(2) {
background-color: red;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

Answer 2

If i understand you correcly, its indeed possible. There are some problem with your code, your not selecting anything because info-table-cell is the td. Here is my approach:
Html
<table class="your-specific-class">
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
<tr>
<td class="info-table-cell">Content 1</td>
<td class="info-table-cell">Content 2</td>
</tr>
</table>
CSS
.your-specific-class tr:nth-child(1) td:nth-child(2){
background-color: #FFF45E;
}
.your-specific-class tr:nth-child(2) td:nth-child(2){
background-color: #DCDCDC;
}
.your-specific-class tr:nth-child(3) td:nth-child(2){
background-color: #FFC933;
}
Example here: https://codepen.io/lauritzz77/pen/XoLjXr