CSS Selector for :not(:has(td[rowspan]))?

Question

I have a Selector in Jquery that i would like to have in CSS, is there a way of doing this in plain css?

$('tr:not(:has(td[rowspan])) td').css('text-align', 'center');

For example: https://jsfiddle.net/uydgtvnc/

td:nth-of-type(n+3) {text-align:center;}

This wont apply on the one cell, because it doens't have a own Category 1 . So it mit be n+2 in this line instead. I'd prefere not adding any classes / style inside the table structure

tr:not:has(td[rowspan]) td {text-align:center;} poorly doesnt work :( — Tim Stieffenhofer, Jul 29 '19 at 07:11
Nope, because it's nth-of-type(2) in second tr of tbody, because nth-of-type(1) is category 2 in this case (because of rowspan). — Tim Stieffenhofer, Jul 29 '19 at 07:20
Or with other words: nth-of-type(x) is changing because of the rowspan in this table. So it needs to check if it has td[rowspan] in first td. — Tim Stieffenhofer, Jul 29 '19 at 07:23
From https://developer.mozilla.org/en-US/docs/Web/CSS/:not .. "The :not selector will not work with other pseudo selectors that are attached to different elements that are also doing pseudo selection." — Jon P, Jul 29 '19 at 07:26
So no way doin this with plain css? Like tr:has(td[rowspan]) td:nth-of-type(2) {text-align:left;} (doesn't work..) https://jsfiddle.net/gxet90j7/2/ — Tim Stieffenhofer, Jul 29 '19 at 07:43
The short answer is this can't be done with CSS alone. CSS can not currently "go back up the DOM". Which is effectively what you are trying to do with: `tr:not(:has(td[rowspan]))`. You are trying to select a parent `tr` which does not have a child with `[rowspan]` . Also see: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Jon P, Jul 29 '19 at 07:47
ok. Then i do td[rowspan] {text-align:left;} and add rowspan="1" to the $('tr:not(:has(td[rowspan])) td') in the table structure? (works but is it ok to use rowspan="1"?) https://jsfiddle.net/gxet90j7/3/ — Tim Stieffenhofer, Jul 29 '19 at 08:00
I just ask because rowspan="1" is not set on all in a table, but isn't it theoretically what a usual always is? And if i now use it for css specification, would adding a class be the better code for it? — Tim Stieffenhofer, Jul 29 '19 at 08:24
@Jon P: That's some really poor writing on MDN's part. I think it's supposed to say "The :not selector will not work with complex selectors" - which is addressed in selectors-4, and moreover this is more of an issue with :has() not being available in CSS. — BoltClock, Sep 02 '19 at 05:04

score 2 · Accepted Answer · answered Jul 29 '19 at 13:09

An exact equivalent for :has in CSS is not possible, but I get from your comments that you want to select specific tds based on whether the first td in the tr has rowspan or not. That can be done.

th {
  background: #555;
  color: #fff;
}

th.dark {
  background: #333;
}

/*td:nth-of-type(n+3) {text-align:center;}*/

td:first-child[rowspan] ~ td:nth-of-type(n+3),
td:first-child:not([rowspan]) ~ td:nth-of-type(n+2) {
  text-align: center;
}

<table id="mylist">
  <thead>
    <tr>
      <th scope="col" rowspan="2">Category</th>
      <th scope="col" rowspan="2">Category 2</th>
      <th scope="colgroup" colspan="5" class="dark">Headline 1</th>
      <th scope="colgroup" colspan="4" class="dark">Headline 2</th>
    </tr>
    <tr>
      <th scope="col">Term 1</th>
      <th scope="col">Term 2</th>
      <th scope="col">Term 3</th>
      <th scope="col">Full</th>
      <th scope="col">Double</th>
      <th scope="col">Term 1</th>
      <th scope="col">Term 2</th>
      <th scope="col">Full</th>
      <th scope="col">Double</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Category 1 Line</td>
      <td>Category 2 Line</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
      <td>x</td>
      <td>x</td>
      <td> </td>
    </tr>
    <tr>
      <td>Category 2 Line </td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
      <td> </td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
    </tr>
  </tbody>
</table>

If this is not what you had in mind, please comment!

oh yeah! `tbody > tr > td:nth-of-type(3):not([colspan]) { color: darkRed; }` to color the non-colspanned columns correctly! — Phlip, Jul 03 '20 at 13:56

CSS Selector for :not(:has(td[rowspan]))?

1 Answers1