CSSで特定のクラスを持たないHTML要素の最初のオカレンスを選択する方法は？

Question

私は、CSSを使ってdatepicker内の特定の要素のスタイルを設定しようとしています。 n番目のセレクタを使うとシンプルでなければならないと思っていましたが、どうやってそれが可能かは分かりません。

は、私はこのようなCSSとHTMLコードを持っている：

.ui-datepicker tr td:not(.ui-state-disabled) + td:nth-of-type(1) 
 
{ 
 
    background-color: red; 
 
}

<table class="ui-datepicker"> 
 
    <tr> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td> 
 
     This is the td element I like to select 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table class="ui-datepicker"> 
 
    <tr> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td> 
 
     This is the td element I like to select 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    </tr> 
 
</table>

は私が最後のui-state-disabled要素の後の最初のtd要素を選択したいと思います。問題は、そのtd要素の位置と、td要素の数が常に同じではないということです。スニペットのCSSコードで何を試してみたかはわかりますが、うまくいきません。私が探しているのは、 "最初のオカレンス"セレクタです。 CSSだけを使ってこれを達成する方法はありますか？

Answer 1

td.ui-state-disabled + td:not(.ui-state-disabled) { 
 
color: red; 
 
}

<table class="ui-datepicker"> 
 
    <tr> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table class="ui-datepicker"> 
 
    <tr> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td class="ui-state-disabled"> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    <td> 
 
     ... 
 
    </td> 
 
    </tr> 
 
</table>