How to use CSS selector to eliminate element if it contains specific type of child element

Question

Let me give an example to clarify my question.

Assume I have a table like below:

<table>
  <tr>
    <th>header1</th>
    <th>header2</th>
  </tr>

  <tr>
    <td>elem1</td>
    <td>elem2</td>
  </tr>

  <tr>
    <td>elem3</td>
    <td>elem4</td>
  </tr>
</table>

I want to show that table row containing <td> element is clickable, so I'm trying to change the mouse pointer cursor to hand when it hovers on <tr> that contains <td> element.

I can do that by setting the style like below:

table tr:not(:first-child) {cursor:pointer;}

The first child of a table is normally the <tr> that contains <th>.

Here comes the question, how to write the css style to eliminate <tr> that contains <th> as direct child with more intuitive way?

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Jon P, Apr 23 '18 at 07:26

score 3 · Answer 1 · answered Apr 23 '18 at 06:56

3

tr td {cursor: pointer} will do just fine:

tr td {cursor: pointer}

<table>
  <tr>
    <th>header1
    <th>header2
  </tr>
  <tr>
    <td>elem1
    <td>elem2
  </tr>
  <tr>
    <td>elem3
    <td>elem4
  </tr>
</table>

Or just td {cursor: pointer} is fine too.

answered Apr 23 '18 at 06:56

VXp

10,307
6
25
40

1

Thanks, but it seems that I modify td one by one but not tr. Anyway, it works. – Eugene Apr 23 '18 at 09:05

score 3 · Accepted Answer · answered Apr 23 '18 at 06:59

Make use of the thead and tbody element, and then use CSS to only target the rows in the tbody:

table tbody tr {
  cursor: pointer;
}

<table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>elem1</td>
      <td>elem2</td>
    </tr>
    <tr>
      <td>elem3</td>
      <td>elem4</td>
    </tr>
  </tbody>
</table>

Ambroży · Answer 3 · 2019-11-14T13:14:43.953

1

You can add class to your editable tr:

tr.editable {
  cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

edited Nov 14 '19 at 13:14

answered Apr 23 '18 at 07:35

Ambroży

75
4

Thanks, it could be a solution. – Eugene Apr 23 '18 at 09:07

score 1 · Answer 4 · answered Nov 05 '19 at 13:14

1

You may also use CSS pseudo-class:

It will select from 2nd to last row in your table.

table tr:nth-child(n+2) {
   cursor: pointer;
}

<table> 
   <tr>
     <th>header1</th>
     <th>header2</th>
   </tr> 
   <tr class="editable">
     <td>elem1</td>
     <td>elem2</td>
   </tr>
   <tr class="editable">
     <td>elem3</td>
     <td>elem4</td>
   </tr> 
</table>

answered Nov 05 '19 at 13:14

Ambroży

75
4

It could be a solution, but it might not be a good idea to couple CSS style with the element appeared sequence. – Eugene Nov 11 '19 at 03:21

score -3 · Answer 5 · edited Apr 24 '18 at 07:46

-3

You could simply refer to all tr that have as their child <td> it will automatically omit the tr with <th> tags

 table tr td {
    cursor:pointer;
 }

edited Apr 24 '18 at 07:46

GGO

2,700
3
16
35

answered Apr 23 '18 at 07:20

VivekG

1
2

Please provide an explanation when answering a question. – Baksteen Apr 23 '18 at 07:25

How to use CSS selector to eliminate element if it contains specific type of child element

5 Answers5