CODEWITHSUNDEEP
htmlcsscss-selectors
Chris
Chris

Reputation: 6233

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?

Upvotes: 2

Views: 226

Answers (1)

Dominic
Dominic

Reputation: 2437

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>

Upvotes: 3

Related Questions