htmlcssangulartypescriptngx-gallery

Applying a css class to the first image in my ngx-gallery-9 array

I have this ngx-gallery-9 stackblitz here and I'm trying to figure out how to apply a :first-of-type or nth-child(1) to 'fa-star' icon in the image gallery.

Problem - I want to color just the 1st 'fa-star' font awesome icon in the gallery. So just the 1st image is colored yellow.

I've tried a couple of different things but they all seem to apply the css to every icon or none of the icons, not just the first

couple of things I've tried below with no luck

:host >>> ngx-gallery-action:first-of-type .fa-star:first-of-type {
      color: yellow;
}

:host >>> fa-star:first-of-type {
      color: yellow;
}

:host >>> .fa-star:nth-child(1) {
      color: yellow;
}

Solution

  • Don't use nth-of-type on the star, but on the first image(container), then the star,.

    As the star will always be the first star in each container..

    https://stackblitz.com/edit/angular-bootstrap-4-starter-mttiqx?file=src%2Findex.html

    so it will be:

    .ngx-gallery-image:first-of-type .fa-star { color:#fc0; }