CSS - Hide first with Class

Question

I need to hide the first tr.snip row

Why this CSS doesnt work?

.table tr.snip:first-child {
    display:none!important;

}

html

 <table>
    <tbody>
    <tr>...</tr>
    <tr class="snip">...</tr>
    <tr class="snip">...</tr>
    </tbody>
  </table>

Found https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — dazzafact, Jul 27 '19 at 22:51

Azametzin · Answer 1 · 2019-07-27T22:58:08.890

1

Because you are trying to select a tr.snip that is ALSO the first child of its parent. The tr.snip you are trying to hide is the second child of its parent, so it doesn't match the CSS selector.

Also, don't forget to put your content inside td, like this:

<tr class="snip"><td>...</td></tr>

edited Jul 27 '19 at 22:58

answered Jul 27 '19 at 22:51

Azametzin

5,223
12
28
46

score 1 · Accepted Answer · answered Jul 27 '19 at 23:02

When you say .snip:first-child, you are looking for something that both has the snip class and is the first child of its parent. In your table, the first row with the snip class is the third child, so the selector doesn't work.

Directly selecting things the way you're trying to won't be possible until selectors level 4 comes out, so at the moment your best bet is to try to combine sibling selectors (+ and ~) with pseudo selectors. What exactly you do depends on how complicated your use case is.

The simplest solution for your example would be:

tr + tr.snip {
  display: none;
}

If necessary, you could also try something like:

tr:not(.snip) + tr.snip {
  display: none;
}

Or you could do it in reverse:

tr.snip {
  display: none;
}
tr.snip + tr.snip {
  display: table-cell;
}

Or (if this is more appropriate):

tr.snip {
  display: none;
}
tr.snip ~ tr {
  display: table-cell;
}

CSS - Hide first with Class

2 Answers2