Using forward slash as ID attribute

css, css-selectors, html

Solution

An `id` attribute value may, according to HTML5 and in browser practice, contain any characters except space characters. This gives a lot of liberties, but choices have their cost, since contexts where `id` attribute values might be used outside HTML may impose their own restrictions and requirements.

Specifically, in CSS, an identifier (such as one that you write after `#` in selector syntax) “ can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit”. Other characters may be used only using escape notations that use the backslash `\` character.

In your jsfiddle, the HTML attribute is `id="#\\/name"`. This means that the attribute value starts with one `#` character, followed by two `\` characters, followed by one `/` character. All these must be escaped. The simplest way is to precede each of them with a backslash, so the selector would be `#\#\\\\\/name`.

But I suppose that the `#` in the value is actually a typo or mistake and should not be there. So I think your code was meant to be like this:

#\\\\\/name {
    display:none;
}
#\\\\\/name:target {
    display: inline-block;
}
#\\\\\/name:target ~ .open {
    display: none;
}

<div id="wrapper">
    <div id="\\/name">I'm alive!</div>
    <a class="open" href="#\\/name">Open</a>
</div>

Problem

Just discovered that you can use (any?) unicode character as ID attributes, and this opens up a whole new world for my part. But I'm trying to set the ID attribute to `/name` , and it doesn't want to work. Here's what I've got: http://jsfiddle.net/z2xkm9pr/ ``` #\\/name\\/ { display:none; } #\\/name\\/:target { display: inline-block; } #\\/name\\/:target ~ .open { display: none; } ``` What am I doing wrong? Or is this something impossible to achieve? Do I have to go back to using ☠ ? ALSO: In my final CSS I'm using `[id*='work-']` to select all divs with the ID work-, how do I use /name for this?

Original source