CSS to target first option in p-dropdown primeng

Issue

I am using primeng in my app and I want to customize just one option in the p-dropdown but not sure how to go about it.

<p-dropdown id="dropdown" [options]="options" optionLabel="name" optionValue="name"></p-dropdown>

I have this as my css:

p-dropdown ::ng-deep .p-dropdown-item {
    /* my custom css for one option only */
}

and I have tried using :first, :first-child, :first-of-type, :nth-child, :nth-of-type to see if I can target just one option but it still applies the css to all the options in the dropdown. How can I go about this?

PS: This question has nothing to do with the select element and everything to do with the primeng p-dropdown element. Please read the question in its entirety.

Solution

Please note that there are p-dropdownitem element and p-dropdown-item CSS class:

<p-dropdownitem ...>
  <li class="p-dropdown-item" ...>
    <span ...>LABEL</span>
  </li>
</p-dropdownitem>

so, :first-item should be applied to the element and not its child element with that class:

p-dropdown ::ng-deep p-dropdownitem:first-child .p-dropdown-item {
  /* my custom css for one option only */
}

hope this helped :)

Answered By - Andriy