I found this CSS definition in the semantic UI. They use this style extensively.
.ui.\32.buttons > .button,
.ui.two.buttons > .button {
width: 50%;
}
I can see what they are trying to accomplish.
They want the CSS definition to read
.ui.2.buttons > .button,
It must be ASCII code. Code \32 would be a space. Code \3 would be a "start of text".
Can you explain more what is going on here? Why is the ascii not converted into a space?
And why does the W3C CSS validator accept this CSS without errors?
\32 is hexadecimal 32, which translates to decimal number 50, which is indeed the character 2. \31 would be 1.
I found this quote from the W3C specs:
In CSS2, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [A-Za-z0-9] and ISO 10646
characters 161 and higher, plus the hyphen (-); they cannot start with
a hyphen or a digit. They can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.
I found the quote in this arcticle which puts it in context, but it boils down to the fact that although normally class names cannot start with a number, it is allowed when the number is entered as an escaped character or (in this case) an ISO 10646 numeric code for a character.
Related
What characters/symbols are allowed within the CSS class selectors?
I know that the following characters are invalid, but what characters are valid?
~ ! # $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
You can check directly at the CSS grammar.
Basically1, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
In short, the previous rule translates to the following, extracted from the W3C specification:
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".
Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.
1 It's all made a bit more complicated by the inclusion of escaped Unicode characters (that no one really uses).
2 Note that, according to the grammar I linked, a rule starting with two hyphens, e.g., --indent1, is invalid. However, I'm pretty sure I've seen this in practice.
To my surprise most answers here are wrong. It turns out that:
Any character except NUL is allowed in CSS class names in CSS. (If CSS contains NUL (escaped or not), the result is undefined. [CSS-characters])
Mathias Bynens' answer links to explanation and demos showing how to use these names. Written down in CSS code, a class name may need escaping, but that doesn’t change the class name. E.g. an unnecessarily over-escaped representation will look different from other representations of that name, but it still refers to the same class name.
Most other (programming) languages don’t have that concept of escaping variable names (“identifiers”), so all representations of a variable have to look the same. This is not the case in CSS.
Note that in HTML there is no way to include space characters (space, tab, line feed, form feed and carriage return) in a class name attribute, because they already separate classes from each other.
So, if you need to turn a random string into a CSS class name: take care of NUL and space, and escape (accordingly for CSS or HTML). Done.
I’ve answered your question in-depth at CSS character escape sequences. The article also explains how to escape any character in CSS (and JavaScript), and I made a handy tool for this as well. From that page:
If you were to give an element an ID value of ~!#$%^&*()_+-=,./';:"?><[]{}|`#, the selector would look like this:
CSS:
<style>
#\~\!\#\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
{
background: hotpink;
}
</style>
JavaScript:
<script>
// document.getElementById or similar
document.getElementById('~!#$%^&*()_+-=,./\';:"?><[]\\{}|`#');
// document.querySelector or similar
$('#\\~\\!\\#\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>
Read the W3C spec. (this is CSS 2.1; find the appropriate version for your assumption of browsers)
relevant paragraph:
In CSS, identifiers (including
element names, classes, and IDs in
selectors) can contain only the
characters [a-z0-9] and ISO 10646
characters U+00A1 and higher, plus the
hyphen (-) and the underscore (_);
they cannot start with a digit, or a
hyphen followed by a digit.
Identifiers can also contain escaped
characters and any ISO 10646 character
as a numeric code (see next item). For
instance, the identifier "B&W?" may be
written as "B&W?" or "B\26 W\3F".
As #mipadi points out in Kenan Banks's answer, there's this caveat, also in the same webpage:
In CSS, identifiers may begin with '-'
(dash) or '_' (underscore). Keywords
and property names beginning with '-'
or '_' are reserved for
vendor-specific extensions. Such
vendor-specific extensions should have
one of the following formats:
'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name
Example(s):
For example, if XYZ organization added
a property to describe the color of
the border on the East side of the
display, they might call it
-xyz-border-east-color.
Other known examples:
-moz-box-sizing
-moz-border-radius
-wap-accesskey
An initial dash or underscore is
guaranteed never to be used in a
property or keyword by any current or
future level of CSS. Thus typical CSS
implementations may not recognize such
properties and may ignore them
according to the rules for handling
parsing errors. However, because the
initial dash or underscore is part of
the grammar, CSS 2.1 implementers
should always be able to use a
CSS-conforming parser, whether or not
they support any vendor-specific
extensions.
Authors should avoid vendor-specific
extensions
The complete regular expression is:
-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*
So all of your listed characters, except “-” and “_” are not allowed if used directly. But you can encode them using a backslash foo\~bar or using the Unicode notation foo\7E bar.
For those looking for a workaround, you can use an attribute selector, for instance, if your class begins with a number. Change:
.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */
to this:
[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */
Also, if there are multiple classes, you will need to specify them in selector or use the ~= operator:
[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}
Sources:
https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
Is there a workaround to make CSS classes with names that start with numbers valid?
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
My understanding is that the underscore is technically valid. Check out:
https://developer.mozilla.org/en/underscores_in_class_and_id_names
"...errata to the specification published in early 2001 made underscores legal for the first time."
The article linked above says never use them, then gives a list of browsers that don't support them, all of which are, in terms of numbers of users at least, long-redundant.
I would not recommend to use anything except A-z, _- and 0-9, while it's just easier to code with those symbols. Also do not start classes with - while those classes are usually browser-specific flags. To avoid any issues with IDE autocompletion, less complexity when you may need to generate those class names with some other code for whatever reason. Maybe some transpiling software may not work, etc., etc.
Yet CSS is quite loose on this. You can use any symbol, and even emoji works.
<style>
.😭 {
border: 2px solid blue;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
<div class="😭">
😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅😅
</div>
We can use all characters in a class name. Even characters like # and .. We just have to escape them with \ (backslash).
.test\.123 {
color: red;
}
.test\#123 {
color: blue;
}
.test\#123 {
color: green;
}
.test\<123 {
color: brown;
}
.test\`123 {
color: purple;
}
.test\~123 {
color: tomato;
}
<div class="test.123">test.123</div>
<div class="test#123">test#123</div>
<div class="test#123">test#123</div>
<div class="test<123">test<123</div>
<div class="test`123">test`123</div>
<div class="test~123">test~123</div>
For HTML5 and CSS 3, classes and IDs can start with numbers.
Going off of Kenan Banks's answer, you can use the following two regex matches to make a string valid:
[^a-z0-9A-Z_-]
This is a reverse match that selects anything that isn't a letter, number, dash or underscore for easy removal.
^-*[0-9]+
This matches 0 or 1 dashes followed by 1 or more numbers at the beginning of a string, also for easy removal.
How I use it in PHP:
// Make alphanumeric with dashes and underscores (removes all other characters)
$class = preg_replace("/[^a-z0-9A-Z_-]/", "", $class);
// Classes only begin with an underscore or letter
$class = preg_replace("/^-*[0-9]+/", "", $class);
// Make sure the string is two or more characters long
return 2 <= strlen($class) ? $class : '';
I recently ran into a strange error where a selector stopped working after minification (using csswring 3.0.7). The selector in question matches elements where a data-property includes a hyphen. It worked in development but failed in production on all browsers tested (Chrome, Firefox, IE11, Edge).
After looking through the minified stylesheet, I found that the selector had been transformed from something like [data-attr*="-"] to [data-attr*=-]. Quotes have been removed and this is rejected by the browsers.
The thing is, I can't find any source that says a single hyphen requires quotes. Obviously the minifier-authors has found the same sources I have.
This page details the relevant parts of the specification.
So, a valid unquoted attribute value in CSS is any string of text that is not the empty string, consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit.
A single hyphen seems perfectly valid in this case.
Here is a jsfiddle testing different scenarios. Only when trying to match exactly a single, unquoted hyphen does the selector fail.
Am I missing something? Shouldn't this be a valid selector?
Here's the precise text from the CSS2.1 specification itself as referenced by the article:
In CSS, identifiers (including element names, classes, and IDs in selectors) 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.
As you can see, this does not appear to address the case regarding a single hyphen.
However, looking at the grammar in section 4.1.1, we find the following tokenization for an ident:
[-]?{nmstart}{nmchar}*
{nmstart} is represented by [_a-z]|{nonascii}|{escape} and is mandatory in an ident. The preceding hyphen is optional, but as the hyphen does not appear in {nmstart}, this would imply that a single hyphen is not a valid CSS identifier.
Therefore, the selector [data-attr*=-] is indeed invalid, and a single hyphen has to be quoted in order to be treated as a string instead.
I have a div with an ID which contains a percentage symbol, like this:
<div id="foo%bar">
stuff
</div>
And I cant avoid that, is a div that I cant change so I need to deal with that :(
I am trying to reach that element using LESS but I get an error in the line that contains the percentage when I try to compile the LESS file:
To compile the LESS file I'm using recess (https://github.com/sindresorhus/grunt-recess), a GruntJS plugin. If someone know any other tool to compile LESS files avoiding this error I will be happy to change to use it.
Thanks in advance!
While that is a valid (HTML5) id, it is not a valid CSS selector. From the Selectors Level 3 docs (W3C)
In CSS, identifiers (including element names, classes, and IDs in
selectors) 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. Identifiers can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
You can use a backslash character to escape the percent sign in the selector and make it valid:
#foo\%bar {
color:red
}
Fiddle
It's not a valid selector; if you have a look at JSFiddle this will not be styled. Instead, use an attribute selector, that way you'll get the expected result and your LESS will be compiled.
[id*="bar"][id*="baz"] {
color:red
}
Working fiddle: http://jsfiddle.net/Gd2FT/2/
The best option is to refactor and remove the percentages, but I think this will suffice in the short term.
Edit: Alternatively, simpler is better:
[id="bar%baz"] {
color:red
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What characters are valid in CSS class names?
Don't if this is suppose to be like this, but when I specify a class: .3plans, it does not apply the styling. But when I change the class name to .plans, it recognizes the style. Why is that? Note that the .3plans class is unique and there is no other style like that in my sheet, so it cannot be a duplicate. Is this phenomenon a common CSS practice? (not to use numbers in styles)
If class & ID is start from number then is not recognized by css. But you can write like this .plans3 instead of .3plans.
As per W3c
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A1 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
Check this discussion for more Which characters are valid in CSS class names/selectors?
This flumoxed me for a while till someone pointed this out. From the W3C:
In CSS2, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [A-Za-z0-9] and ISO 10646
characters 161 and higher, plus the hyphen (-); they cannot start with
a hyphen or a digit. They can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.
Basically a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers.
Now check more info http://www.w3.org/TR/CSS21/grammar.html#scanner
A class name can start with a digit, but then you have to write the digit as an escape code:
.\33plans { ... }
33 is the hexadecimal character code for the character 3.
The W3C CSS validation service says:
"In CSS1, a class name could start with a digit (".55ft"), unless it
was a dimension (".55in"). In CSS2, such classes are parsed as unknown
dimensions (to allow for future additions of new units) To make
"3plans" a valid class, CSS2 requires the first digit to be escaped
".\33plans" [3plans]"
Let's say I have
<span class="1">hello</span>
And I want to declare:
span.1 { /* rules */ }
This does not seem to work (i.e. the CSS rule is not being applied.) Is there a way to get this to work? I tried just quoting the "1" in the CSS selector but that doesn't appear to be it.
See this: Which characters are valid in CSS class names/selectors?
a (class) name must begin with an underscore (_), a dash (-), or a letter(a–z)
You should always name your classes and IDs with semantics in mind. What meaning does a number bring to anybody? What does it count?
To avoid this, having IDs and classes named as just integers isn't valid CSS according to W3, and thus not supported by most browsers. Always validate your HTML and CSS.
The solution is to simply give your class a more meaningful name. What are you counting? Is it comments on a blog? If so, you could just add the class comment to each of them. If you really need unique name for each, you could use comment5 instead, but that doesn't seem to make much sense as a class, in which case you should be using IDs instead.
The exact naming requirements is also described in W3C's CSS specification, section 4.1.3 Characters and case:
In CSS, identifiers (including element names, classes, and IDs in selectors) 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. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
So you should check CSS Grammar
so name must begin with an underscore _ ,letter(a–z), followed by any number of dashes, underscores, letters, or numbers.
EDIT:
I recommend to you read this article Valid chars in CSS class names.
Colleague #Triptych gave us awesome answer.