0

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;
}
chuckd
  • 13,460
  • 29
  • 152
  • 331

2 Answers2

1

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; }
Rmaxx
  • 1,105
  • 11
  • 22
  • can you provide me with the answer in my stackblitz to assure it's working? – chuckd Dec 04 '20 at 21:01
  • you can add the class with the inspector tool (F12) to see it works, but ill give it a go in stackblitz.. – Rmaxx Dec 04 '20 at 21:13
  • 1
    https://stackblitz.com/edit/angular-bootstrap-4-starter-mttiqx?file=src%2Findex.html there you go – Rmaxx Dec 04 '20 at 21:24
0

have you tried `nth-of-type' so something like this:

.fa-times-circle:nth-of-type(1) {
  display: none !important;
}

Edit: Try this code:

.ngx-gallery-icons-wrapper > .fa-times-circle:nth-of-type(1) {
  display: none !important;
}
John
  • 5,132
  • 1
  • 6
  • 17
  • I just tried and it still hides all of the icons, not just the first. I'm thinking it's something related to the library hiding and showing the images when selecting them. – chuckd Dec 02 '20 at 03:36
  • @user1186050 what is the class of your first image? and also the class that is encasing your circles? – John Dec 02 '20 at 04:00
  • the first image has classes 'ngx-gallery-image ngx-gallery-active ngx-gallery-clickable ng-star-inserted' and the class wrapping the icon is 'ngx-gallery-icons-wrapper' – chuckd Dec 02 '20 at 04:19
  • @user1186050 I've updated my answer. Please try the new code. – John Dec 02 '20 at 04:25
  • It didn't work, but thanks for the help. I'm going to try something else for now – chuckd Dec 02 '20 at 04:28
  • @user1186050 alrighty, sorry I couldn't help. – John Dec 02 '20 at 04:30