Select first child with specific class inside a table and hide it

Question

I'm using the following code to hide the first child of class.

.remRef {
   display: none
}

.remRef~.remRef {
   display: block
}

<table width="200" border="1">
  <tr>
    <td><a href="javascript:void(0);" class="remRef">link1</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" class="remRef">link2</a></td>
  </tr>
  <tr>
    <td><a href="javascript:void(0);" class="remRef">link3</a></td>
  </tr>
</table>

It's not working inside the table. Please help me to solve this.

You're using an adjacent sibling selector and your elements are not siblings. You will need Javascript — Paulie_D, Mar 08 '19 at 09:46
so if all the links have the same class wouldn't it be the same if you only hide the link inside the first ? — Fabrizio Calderan, Mar 08 '19 at 09:49
To hide the first link: table tr:first-child > td .remRef { display: none; } — arvie, Mar 08 '19 at 09:52

score 2 · Answer 1 · answered Mar 08 '19 at 09:49

2

Please check below example. hope this helps!

table tr:first-child {
    display: none;
   }

<table width="200" border="1">
    <tr>
      <td><a href="javascript:void(0);" class="remRef">link1</a></td>
    </tr>
    <tr>
      <td><a href="javascript:void(0);" class="remRef">link2</a></td>
    </tr>
    <tr>
      <td><a href="javascript:void(0);" class="remRef">link3</a></td>
    </tr>
  </table>

answered Mar 08 '19 at 09:49

user10936942

171
1
2

I can't use table tr:first-child selector, because I have lot of other columns. This is just a sample code. I need to hide it using class name remRef. – NightOwl Mar 08 '19 at 09:52

Select first child with specific class inside a table and hide it

1 Answers1