How to add CSS to a particular row in a table-CodePudding

I have a table as below

<table className="TableClass">
  <tbody>
    <tr row="0">
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr row="1">
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

I just need to add CSS to the <tr row="0"> only. will that be possible ?

CodePudding user response：

You can use the [attribute=value] selector

tr[row="0"] { 
  background-color: yellow;
}

<table className="TableClass">
<tbody>
<tr row="0">
  <td>Data</td>
  <td>Data</td>
</tr>
<tr row="1">
  <td>Data</td>
  <td>Data</td>
</tr>
</tbody>
</table>

CodePudding user response：

To apply styling on elements with certain attributes in CSS you can use the attribute selector. The syntax for attribute selector is

elementName [attribute = value]

So, you can just apply styling to the row 1 like this:

tr[row="0"]{
/*all styles here*/
}