Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using forward slash as ID attribute

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?

like image 507
QAW Avatar asked Dec 02 '14 17:12

QAW


People also ask

Can HTML ID contain slash?

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 .

How do you write ID attributes?

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

Can ID have special characters HTML?

In HTML 4, ID values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods. Just bear in mind that using numbers, punctuation or special characters in the value of an ID may cause trouble in other contexts (e.g., CSS, JavaScript, regex).

Why forward slash is used in HTML?

The forward-slash i.e. / is used to represent the closing of a tag in HTML. There are also some tags that do not require the closing of a tag in HTML and they are called self-closing tags.


1 Answers

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>
like image 70
Jukka K. Korpela Avatar answered Oct 26 '22 17:10

Jukka K. Korpela