Search code examples
cssunicodecss-selectors

matching unicode char in css selectors

Strange question but I would like to match unicode characters in a selector attribute in css

I think an example is worth a thousand words:

In the following example, the last 4 selectors do not work

input {
  width: 50px;
  height: 50px;
  background-color: red;
}


/* writing the unicode char is of
course working, but I don't want to past complexe
unicode char in my css */

[value="a"] {
  background-color: pink;
}


/* html notation */

[value="a"],

/* unicode notation */

[value="U+F52A"],

/* css content notation */

[value="\97"],

/* js notation */

[value="\u97"] {
  background-color: blue;
}
<input value="&#97;">

Solution

  • CSS escapes values using a backslash and hex value of the unicode point value.

    For instance, for a (dec = 97, hex = 0x61), you can use \61 or \000061:

    input {
  width: 50px;
  height: 50px;
  background-color: red;
}


/* using hex value https://unicodelookup.com/ */
[value="\61"] {
  background-color: blue;
}
    <input value="&#97;">