# CSS Escape function like JavaScript CSS.escape()

**URL:** <https://forum.elixirforum.com/t/css-escape-function-like-javascript-css-escape/63803>\
**Category:** Questions\
**Tags:** phoenix, css, heex\
**Created:** [May 27, 2024, 4:02am UTC](https://forum.elixirforum.com/t/css-escape-function-like-javascript-css-escape/63803 "2024-05-27T04:02:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![user20230119](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/user20230119/32/31375_2.png) [@user20230119](https://forum.elixirforum.com/u/user20230119)\
**Post date:** [May 27, 2024, 4:02am UTC](https://forum.elixirforum.com/t/css-escape-function-like-javascript-css-escape/63803/1 "2024-05-27T04:02:31Z")

</div>

Are there any Elixir or Phoenix functions that escape CSS like CSS.escape?

I want to securely escape values for attribute selectors.

```elixir
<style>
div[value="<%= "[value with double quote]" %>"] {
  background-color: blue;
}
</style>

<div value="1">One</div>
<div value="2">Two</div>
<div value="3">Three</div>

```

> **[CSS: escape() static method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static)**
>
> The CSS.escape() static method returns a
> string containing the escaped string passed as parameter, mostly for
> use as part of a CSS selector.

---

<div class="post-metadata">

**Author:** ![cmo](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cmo/32/19618_2.png) [@cmo](https://forum.elixirforum.com/u/cmo)\
**Post date:** [May 27, 2024, 7:46am UTC](https://forum.elixirforum.com/t/css-escape-function-like-javascript-css-escape/63803/2 "2024-05-27T07:46:38Z")

</div>

I would expect something like that to be in `phoenix_html` if it existed: [Phoenix.HTML — Phoenix.HTML v4.3.0](https://hexdocs.pm/phoenix_html/Phoenix.HTML.html).
