How to target a specific element among others with CSS?

[lucien (Lucien Derhy)]

Hi there,

So in our website we have a privacy policy page which looks like this: Privacy, GDPR and Data protection at Digitevent

The page content is managed and generated by a Prismic document this way:

My problem is that inside this page, I've been asked to style a specific <a> tag (add an underline and a color to it), and I have no idea how to do that without affecting all of the <a> tags since they don't have any unique selector

Example to illustrate, here all <p> tags are generic, without any selector so I can't style a specific one if I wanted to:

Is there an effective way to do it?

[samlittlefair]

Hi @lucien,

I can think of a couple of ways to do this.

First of all, you could create a Custom Label, and label the relevant links. This would add a <span> to the text with the class of the label's name. I'm not sure if the span would be a child or parent of the a tag, but you could cover both cases. If you have a label called special, you would wind up with either:

<span class="special"><a href="https://google.com">Text</a></span>

or

<a href="https://google.com"><span class="special">Text</span></a>

So you can target that in CSS with:

a .special,
.special a {
  color: pink;
}

Alternatively, if all of your special links share a characteristic (say, they are links to a specific Custom Type, or links to a specific external website), then you could use the HTML Serializer to customize the HTML markup. That might look something like this:

const htmlSerializer = ({element, type}) => {
  if (type === "link" && link.url === "https://google.com/") 
    return `<a href="https://google.com" class="google">${content}</a>`
}

(The real implementation would be more complex, but I hope that gives you an idea of how it could work.)

If that doesn't seem like it would work, let me know and I could suggest other configurations.

Sam