What is the meaning of tbody > tr > td in CSS

Deric 0
Viewed 29

Currently I'm trying to understand some CSS parts but couldn't able to understand them due to some notations.

i went through google but couldn't able to find something related to this

can someone please explain the below CSS part?

  tbody > tr > td {
    color: red;

  }
  
  tbody > tr > td:not(:empty) ~ td {
    
    color: green;

  }
  
  tbody > tr > td:empty,
  tbody > tr > td:nth-child(n+6) {
    
    color: black !important;

  }
css
2 Answers

1. Set color: red; to the first <td> element.

tbody > tr > td {
  color: red;
}

2. Set color: green; to all <td> elements that are not empty.

tbody > tr > td:not(:empty) ~ td {
  color: green;
}

3. Set color: black !important; and border: 1px solid black; to the sixth <td> and all following <td> elements. Also, set color: black !important; and border: 1px solid black; to all empty <td> elements (see the fifth <td> element with a black border).

tbody > tr > td:empty,
tbody > tr > td:nth-child(n+6) {
  color: black !important;
  border: 1px solid black;
}

You can create a snippet and see the effect.

tbody > tr > td {
  color: red;
}

tbody > tr > td:not(:empty) ~ td {
  color: green;
}

tbody > tr > td:empty,
tbody > tr > td:nth-child(n+6) {
  color: black !important;
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td></td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
    </tr>
  </tbody>
</table>

Cervus camelopardalis0

That part applies to all td (table data) which are direct children of tr (table row) which are direct children of tbody, text color in these elements will be red.

tbody > tr > td {
  color: red;
}

That part applies to all td which are siblings of not empty td which are direct children of tr which are direct children of tbody, text color in these elements will be green. Documentation for CSS combinators: https://www.w3schools.com/css/css_combinators.asp

  tbody > tr > td:not(:empty) ~ td {
     color: green;
  }

That part applies to all empty td which are direct children of tr which are direct children of tbody (tbody > tr > td:empty). As well as to all td which are direct children of tr which are direct children of tbody except the first five (tbody > tr > td:nth-child(n+6)) and text color in these elements will be black. !important will override ALL previous styling rules for that specific property on that element.

  tbody > tr > td:empty,
  tbody > tr > td:nth-child(n+6) {
    color: black !important;
  }

Useful :nth-child Recipes reference: https://css-tricks.com/useful-nth-child-recipies/

la_petite_kozel0
Related