Changing the color of the comment count metadata

EDIT: The color changes if I go to change the color from Customizer > Colors > Content > Entry Meta Links, however I would like only the comments count to have a different color, not the other links in the post metadata, which is also the author’s name.

Is there a way I can make the comments count have a different color regardless of the other links in the metadata?

EDIT 2: I was able to change the color if I am using the !important, but it seems I am using the wrong selector. What selector do I need for the comment count? I thought it was .comments-link but its something else.

Hi,

Can you link us to the site in question? So we could check w/ CSS selector to use specifically for your site. Thank you.

EDIT 3: I am sending a photo so you can understand the issue better: https://ibb.co/p1mTRBn

As you can see from the image, I was able to change the color of the divider between the authors name and the comment count, using this code:

.comments-link {
color: #FFA500 !important;
}

But I wasn’t able to change the color of the comment count itself that comes right after.

How can I do this?

EDIT 4: I was able to change the background color, so I think .comments-link is actually the right selector: Image: https://ibb.co/y4p0Vv4

However, the color of the text itself still doesn’t change.

What should I do? What is interfering for the text color to change?

Thanks ejcabquina for your fast reply! Unfortunately I am not able to provide the site link.

Can someone help me please?

It’s hard to tell if you’re using the right CSS selector without seeing the DOM structure.

But try this CSS:

.comments-link a {
    color:  #FFA500;
}

With this CSS, we’re directly targeting the text rather than its container.

Okay, I solved it:

This is the code I used:

.comments-link a{
color: #FFA500 !important;
}

It worked when I added that a letter before the {

Thank you ejcabquina !

Yes, I actually came to the same conclusion just a moment ago and it worked!!
Awesome!!

Yeah the “a” is important because that’s actually where the text is placed.

the “a” stands for <a> or the anchor markup.

The DOM structure normally goes like this

<span class="comment-link>
   <span class="gp-icon">
         <svg> </svg> // if you have icons
         <a href=""> Comment Link Text here </a>
   </span>
</span>

Glad you found your answer. No problem. ??