10

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?

2
  • Why would you want to do this? What "new world" is this opening up?
    – Mike Brant
    Commented Dec 2, 2014 at 18:55
  • Skulls in the address bar man, cmon! No, actually I'm working on a one page navigation site and I've been trying to find a way to hide the hash in the address bar. The only problem is that once I do that, the section can't be accessed by a first time user. So instead of removing the hash, I was thinking to incorporate it into the URL and make it look decent. @MikeBrant
    – QAW
    Commented Dec 2, 2014 at 19:16

1 Answer 1

13

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>

5
  • So there's no way to just use the /name as an ID and have the URL just to show example.com/#/name Thank you for a really pedagogic answer. As said, just discovered this function! (This site never seizes to impress).
    – QAW
    Commented Dec 2, 2014 at 19:20
  • 1
    Oh, I did not realize that you wanted just /name. Yes, you can use it, and you can have href="#/name". No escaping needed. In CSS, it needs to be escaped, e.g. using a selector like #\/name. Commented Dec 2, 2014 at 19:30
  • And if I want to use it with [id*='idname'] do I just go [id*='/name'] or [id*='\/name'] ?
    – QAW
    Commented Dec 2, 2014 at 19:55
  • 1
    It suffices to write [id*='/name'] since here / is not part of an identifier. Commented Dec 2, 2014 at 20:30
  • I see. Kiitos my friend! I've really learned something today.
    – QAW
    Commented Dec 2, 2014 at 20:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.