How to target an aria-label beginning with a certain string?

General
1

How can a CSS selector be made to target ARIA labels beginning with a given string?

For example, let’s say we have:

button[aria-label="Follow Abcdefghijk"] {}

and

button[aria-label="Message Abcdefghijk"] {}

Assume “Abcdefghijk” will be a different random string each time, that we have no control over. And we want the Follow button to be one color, and the Message button to be another. The only way to target the respective buttons is to use the beginning part of their ARIA label strings.

How can this be done? (Can this be done?)

2

Yes, this can be done using the CSS attribute selector ^= which matches elements whose attribute value begins with a specified string.

CSS Example:

button[aria-label^="Follow "] {
  background-color: green;
  color: white;
}

button[aria-label^="Message "] {
  background-color: blue;
  color: white;
}

Explanation:

  • [aria-label^="Follow "]: Targets any element whose aria-label starts with "Follow " (note the space if it’s in the label).
  • [aria-label^="Message "]: Same logic, starts with "Message ".

Notes:

  • This is pure CSS — no JavaScript needed.
  • It’s widely supported in all modern browsers.
  • Make sure the value is accurately cased and spaced, as it’s case-sensitive and space-sensitive.