2

I have a WebApp where I need to manipulate certain elements using a CSS file. The CSS classes contain square brackets and other special characters. At least chrome doesn't seem to accept them directly.

<div class="profileElement profile[~redString]">123</div>

Is this class even valid? Is there a way to use the classname? I want:

.profile[~redString]{
    color: red; }

When I escape the ~ with a backslash chrome allows me to inject (F12 -> Elements -> the plus symbol on the top right) it to the page but displays the css in grey, meaning the class does not exist in the page.

Is that class valid? If so, how would I use it?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Tim Rasim
  • 655
  • 7
  • 20

1 Answers1

14

Is this class even valid?

It depends on what you're validating against.

profile[~redString] is a valid HTML class name, exemplified by putting the markup through a validator.

However, .profile[~redString] is not a valid CSS selector, because the ~ is a special symbol as you have found out, and it's not in a place where the CSS parser would expect it. When you escape it, you get

.profile[\~redString]

which is a valid selector, but with a completely different meaning. It represents an element with a class name profile, as well as an attribute called ~redString. It does not represent an element with a class name that is exactly profile[~redString].

To match this element, you need to escape the square brackets as well. This will result in the entire stream of characters being treated as a single identifier:

.profile\[\~redString\]

Alternatively, you can use an attribute selector instead to make things cleaner:

[class~="profile[~redString]"]

Notice the ~= in this CSS2.1 attribute selector, which works similarly to a class selector.

See both selectors in action:

:first-child.profile\[\~redString\],
:last-child[class~="profile[~redString]"] {
  color: red;
}
<div>
  <div class="profileElement profile[~redString]">123</div>
  <div class="profileElement profile[~redString]">456</div>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Cleaner maybe, but definitely not clearer! I'd take the escaped characters any day. – Mr Lister Aug 28 '15 at 14:23
  • @Mr Lister: It does become clearer IMO once you put it through syntax highlighting... which I've just done now. – BoltClock Aug 28 '15 at 14:24
  • Perfect, that works for my purpose. I like the [class=""]-Syntax, since it enables me to just copy/paste the class names into my CSS file, without adding characters inside the class name. – Tim Rasim Aug 28 '15 at 14:29
  • OK, OK, you win. Say @Tim, what will you do with class names like `
    `?
     – Mr Lister Aug 28 '15 at 14:31
  • 1
    @Mr Lister: `.some\"classname` (which, unfortunately, [confuses JSFiddle's syntax highlighter](http://jsfiddle.net/BoltClock/8nL0twyg)) or [`[class~='some"classname']`](http://jsfiddle.net/BoltClock/8nL0twyg/1). With both single and double quotes... you'd have to escape at least one of those things. – BoltClock Aug 28 '15 at 14:39