How to style the initial selection in a p-dropdown from PrimeNG using CSS

Struggling with customizing a single option in the p-dropdown element of my primeng app. Not sure how to achieve this, can anyone help?

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

My current CSS code is:

p-dropdown ::ng-deep .p-dropdown-item {
    /* Custom CSS for one specific option */
}

I've attempted using various pseudo-selectors like :first, :first-child, :first-of-type, :nth-child, :nth-of-type to target only one option without success. Any suggestions on how I can accomplish this?

Note: This question pertains specifically to the primeng p-dropdown element, not the select element. Please read carefully before providing assistance.

cssangularcss-selectorsprimengprimeng-dropdowns

Answer №1

It's important to be aware of the difference between the p-dropdownitem element and the p-dropdown-item CSS class:

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

Therefore, make sure to apply :first-item directly to the element and not its child with that class:

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

I hope this explanation was helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Caching HTTP calls with RxJS BehaviorSubject

I'm struggling to find a neat solution for cashing HTTP requests to a BehaviorSubject. I want a single method for caching and getting the value. Here's an example: @Injectable({ providedIn: 'root' }) export class DataStoreService { ...

angularrxjsrxjs6

Angular HttpClient Catch Return Value

In my quest to develop a universal service for retrieving settings from the server, I've encountered an issue. When errors arise, I want to intercept them and provide a default value (I have a predetermined configuration that should be utilized when e ...

angulartypescriptobservable

CSS Problem: Background Color Not Showing Up in Table Rows

Check out my fiddle below: https://jsfiddle.net/teo7auv3/ I'm facing a challenge where I want to change the background color of the entire table row (TR) to red when there are validation errors. The problem seems to be related to this code snippet: ...

csscolorsbackgroundcss-tables

Error with Cloudinary and the <cl-image> component in Angular 5 CLI

Hello there, I am currently in the process of integrating cloudinary into our website. Following the provided guidelines, I have configured it as shown below: app.module ... import { CloudinaryModule } from '@cloudinary/angular-4.x'; import { ...

angularangular-clicloudinary

Inheriting vertical height and alignment (inline-block)

I struggle to understand how these things work and I would greatly appreciate it if someone could provide an explanation. 1 http://d.pr/i/6TgE+ why http://d.pr/i/UAZn+ *it's actually 9. Here is the code snippet: <header> <div class=" ...

htmlcss

Angular2+ test case indicating lack of NgControl provider

I've been facing an issue while testing an angular component with multiple dependencies. The test case fails with the error: "No Provider for NgControl". Here's the detailed error message: Chrome 66.0.3359 (Mac OS X 10.13.4) configurator compone ...

angularunit-testingtypescripttestbed

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

I am in search of a straightforward Bootstrap 4 carousel that showcases a glimpse of the next slide on the right. Despite exploring similar questions, I have not found a suitable solution. The links to those questions are: 1)Bootstrap carousel reveal part ...

javascriptjqueryhtmlcssbootstrap-4

The Jssor bullet navigator is not visible on the webpage

Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guida ...

javascriptjqueryhtmlcssjssor

The Angular Password Strength Extension will display an error message if the password strength is below 100

It's frustrating to keep trying different methods to achieve a simple task. I have a reactive form and all I want is to display an error if the password strength is not 100, indicating that it does not meet all the requirements. I can easily access t ...

angularangular-material

How to Hide Parent Items in Angular 2 Using *ngFor

I am dealing with a data structure where each parent has multiple child items. I am trying to hide duplicate parent items, but accidentally ended up hiding all duplicated records instead. I followed a tutorial, but now I need help fixing this issue. I only ...

angulartypescriptdatatablengfor

Building secure authentication with Angular, node.js, and an identity provider through SAML integration

Implementing SSO using SAML2 is my goal, but I am facing a challenge with a distributed system where each instance operates independently on its server. There are three instances in the environment: Instance #1: an angular frontend Instance #2: a node.js ...

node.jsangularpassport.jssamlsaml-2.0

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

javascriptjqueryhtmlcssvariables

Angular is having trouble finding the Gapi object

I have implemented the integration of google-docs into my application using Angular. I referred to the google-docs API link provided in the Javascript format https://developers.google.com/docs/api/quickstart/js <!DOCTYPE html> <html> <hea ...

javascriptangulargoogle-docs-api

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

htmlcssreactjs

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

The opacity of the background should not impact the visibility of the image

I applied an opacity effect to the white background of each post with the following CSS: .post{ background: white; opacity: 0.75; border-radius: 0px 0px 6px 0px; } However, this opacity effect is also affecting the images in each post, which ...

cssimageopacity

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

jqueryhtmlcssmenunavigation

Adding a button label value to a FormGroup in Angular

I've been working on a contact form that includes inputs and a dropdown selection. To handle the dropdown, I decided to use the ng-Bootstrap library which involves a button, dropdown menu, and dropdown items. However, I'm facing difficulties inte ...

javascripthtmlangular

Using Ionic framework alongside Ionic View to display a beautiful background image

How can I display a full background image in Ionic 1.2? -hooks -platfroms -plugins -resources -scss -www -css -img -js -lib -templates ... Currently, I have the following HTML structure: <ion-view id="login" hide-nav-bar="true"> ...

cssangularjsionic-frameworkionic-view

Links are unable to function properly outside of the carousel slideshow in Chrome

www.encyclopediasindhiana.org/index2.php I successfully implemented a slideshow using mycarousel with the help of PHP. However, I am facing an issue where the hyperlinks on the left side of the carousel are not working if the image is as large as the heig ...

phphtmlcsstwitter-bootstrapcarousel