Resolved: CSS pseudo-class: not (: first-child) on the tbody element

Question:

I’m trying to style all tbody tags except the first one but with poor results.
As you can see in the snippet, the style is applied to all elements, including the first one, where am I wrong?

div.cont_table_toggle table#general_list tbody.divider:not(:first-child) {
  border-top: 8px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont_table_toggle">
  <table id="general_list" class="table table-bordered">
    <thead>
      <tr>
        <th>AAAA</th>
        <th>BBBB</th>
      </tr>
    </thead>
    <tbody id="block-1" class="divider">
      <tr>
        <td>1111</td><td>2222</td>
      </tr>
    </tbody>
    <tbody id="block-2" class="divider">
      <tr>
        <td>3333</td><td>4444</td>
      </tr>
    </tbody>
    <tbody id="block-3" class="divider">
      <tr>
        <td>5555</td><td>6666</td>
      </tr>
    </tbody>
  </table>
</div>

Answer:

Try using tbody.divider:not(:first-of-type).

The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

Reference : https://www.w3schools.com/cssref/sel_first-of-type.asp https://www.w3schools.com/cssref/css_selectors.asp
Try it below.

div.cont_table_toggle table#general_list tbody.divider:not(:first-of-type) {
  border-top: 8px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont_table_toggle">
  <table id="general_list" class="table table-bordered">
    <thead>
      <tr>
        <th>AAAA</th>
        <th>BBBB</th>
      </tr>
    </thead>
    <tbody id="block-1" class="divider">
      <tr>
        <td>1111</td><td>2222</td>
      </tr>
    </tbody>
    <tbody id="block-2" class="divider">
      <tr>
        <td>3333</td><td>4444</td>
      </tr>
    </tbody>
    <tbody id="block-3" class="divider">
      <tr>
        <td>5555</td><td>6666</td>
      </tr>
    </tbody>
  </table>
</div>

If you have better answer, please add a comment about this, thank you!

Resolved: CSS pseudo-class: not (: first-child) on the tbody element

Resolved: How to separate multiple answers in one column, for multiple columns, by creating extra columns

Resolved: How to set consistent decimal separators in R data frame?

Resolved: How to resolve LNK2001 in c++ projects

Leave A Reply