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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

CodePudding user response：

tbody is not the first child of the table. So the :first-child selector does not work. If you remove the thead, it works.

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
  <table id="general_list" >

    <tbody id="block-1" >
      <tr>
        <td>1111</td><td>2222</td>
      </tr>
    </tbody>
    <tbody id="block-2" >
      <tr>
        <td>3333</td><td>4444</td>
      </tr>
    </tbody>
    <tbody id="block-3" >
      <tr>
        <td>5555</td><td>6666</td>
      </tr>
    </tbody>
  </table>
</div>

You could use :not(#block-1), :nth-child(2), or as the other answer has suggested, :not(:first-of-type).

---

Use not(#block-1)

The first tbody has id that you can use. As you many know, id must unique.

tbody:not(#block-1) selects all tbodys except the first one.

#general_list tbody:not(#block-1) {
  border-top: 8px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

Use :not(:nth-child(2))

#general_list tbody:not(:nth-child(2)) {
  border-top: 8px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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