phpheini phpheini - 6 months ago 55
HTML Question

How to select the first occurrence of an HTML element in CSS that does not have a specific class?

I am trying to style a specific element inside a datepicker using CSS. Although I thought that it must be super simple using the nth selectors I can't seem to figure out how it is possible.

I have CSS and HTML code like this:



.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>





I would like to select the first
td
element after the last
ui-state-disabled
element. The problem is that the position of that
td
element as well as the number of
td
elements is not always the same. You can see what I tried in the CSS code of the snippet however it is not working. What I am looking for is a "first occurrence" selector. Is there any way to accomplish this using only CSS?

Answer

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>

Comments