38946


`tr > td[rowspan]` に隣接する `tr > td` にスタイルを当てたいときに、どのように指定すればいいのか分かりません。

[code]

    <tr>
      <th colspan="3"> あああ </th>
      <td> いいい </td>
    </tr>
    <tr>
      <td> ううう </td>
    </tr>
    <tr>
      <td> えええ </td>
    </tr>
    
[/code]

このような場合に、`<td> ううう </td>` および `<td> えええ </td>` に対してスタイルを当てたいです。


CC BY-SA 3.0
2017-10-15T11:49:36.463
38723
2017-10-22T10:29:41.087
2017-10-16T06:28:23.563
4236
12896
question
html css sass
rowspan の css. 親の親を参照したい


以下でOK。  
td:only-child { background-color: pink;}

実装としては、他のtableへの影響がない様に、  
.hoge td:only-child { background-color: pink;}  
とした方がいい。

追記1：例示されているhtmlがcolspanになっているのはrowspanですよね？  
追記2：質問のタイトルに「親の親を参照したい」とありますが、目的が『 ううう および えええ
に対してスタイルを当てたい』のでしたら、「親の親を参照」する必要はなく、td:only-childで目的を果たせる、という意図で回答しました。


CC BY-SA 3.0
2017-10-22T01:50:44.960
38944
2017-10-22T10:29:41.087
2017-10-22T10:29:41.087
12727
12727
38723
answer


CSS4の擬似クラス`has`を使えば実装できますが、まだ未対応のブラウザも多い状態です。  
対応環境なら以下の記述で反映されるはずです。

[code]

    tr:has(th[colspan]) ~ tr{ color: red;}
    
[/code]


CC BY-SA 3.0
2017-10-22T05:02:10.420
38946
2017-10-22T05:02:10.420
3271
38723
answer