I have this HTML

<div class="options-panel">
    @for (action of sortingActions) {
      @if (!action.hasChildren) {
        <app-options-item
          [columns]="columns"
          [action]="action"
          (buttonClicked)="changeSorting(theadCol.sorting, action.direction)"></app-options-item>
      } @else {
        <app-options-item class="options-divider"
                                    [columns]="columns"
                                    [action]="action"></app-options-item>
      }
    }

</div>

and this CSS

  .options-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 200px;
    padding: 8px 0;
    border-radius: 4px;

   }

I’m trying to put a background color only for the first child with the options-divider class.

If I put a background color only for the class and not the first child the class gets the background color.

I tried these options

.options-divider:nth-of-type(1) {
      background-color: #FF5733; 
    }

options-divider:first-of-type {
      background-color: #FF5733;
    }

 app-options-item:has(.options-divider):first-of-type {
      background-color: palegoldenrod;
    }

why is not it working?