How to target a word with CSS

Question

<a class="u-textlink" href=“www.link.com" rel="category tag">Sustainability</a>

Is there a way to target only rel attribute with the name “Sustainability”? But only with CSS.

I tried a[rel="category tag”] but then all the rels get CSS and I want to target just the rel with word Sustainability if I target a[href="www.link.com”] then all the links get targeted.

Answer 1

It's not possible to do with CSS. You can either use a workaround in CSS or JS to do it.

I think of all the available options these are the most common: data attributes (especially for utility/component styling), IDs if unique, or just adding an additional class in this case.

There are lots of options. Here are a few examples:

/* green for all */

a[rel="category tag"] {
  color: green;
}


/* override only for the ones with the data-attribute */

a[rel="category tag"][data-only-me] {
  color: darkblue;
}


/* override only for the ones with the extra rel */

a[rel="category tag special"] {
  color: red;
}


/* override only for a specific class */

a.special {
  color: hotpink;
}


/* override only for the id */

#special-snowflake {
  color: orange;
}

<a class="u-textlink" href=“www.link.com" data-only-me="" rel="category tag">Sustainability</a>
<a class="u-textlink" href=“www.link.com" rel="category tag">Something else</a>
<a class="u-textlink" href=“www.link.com" rel="category tag special">Something else</a>
<a class="u-textlink special" href=“www.link.com" rel="category tag special">Something else</a>
<a id="special-snowflake" class="u-textlink" href=“www.link.com " rel="category tag ">Something else</a>