ignore top table row styling-CodePudding

How do I ignore styling on the top row of my table? I want all rows under the top row to not be red.

import styled from 'styled-components'

export const StyledTable = styled.table`
    margin-bottom: 40px;
`;

export const TR = styled.tr`
    background-color: red;
    &:hover {
        background-color: #EAEAEA;
    }
`;

Edit: I want to provide additional clarity. I want to change color of my rows on hover. But not do this on the top row, for example:

CodePudding user response：

There're the semantic tag for table head thead. You can use it to style first row.

Otherwise you can use pseudo-classes like :first-child to style first row

#table1 td, #table2 td {
  border: 1px solid #000;
}

#table1 thead tr {
  background: red;
}

#table2 tr:first-child {
  background: red;
}

<h2>Using thead tag</h2>

<table id="table1">
  <thead>
    <tr>
      <td>Head 1</td>
      <td>Head 2</td>
      <td>Head 3</td>
      <td>Head 4</td>
    <tr/>
  </thead>
  <tbody>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
  </tbody>
</table>

<h2>Using pseudo-classes</h2>

<table id="table2">
  <tbody>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    <tr/>
  </tbody>
</table>

CodePudding user response：

you can use:

export const TR = styled.tr`
    background-color: red;
    &:hover {
        background-color: #EAEAEA;
    }
    
    
    &:first-child: {
    //your style for first rows here 
    }
`;