In the latest version of Selectors Level 4:
The class selector is given as a full stop (. U+002E) immediately followed by an identifier.
An ID selector consists of a “number sign” (U+0023, #) immediately followed by the ID value, which must be a CSS identifier.
In the identifier link above:
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 (_); cannot start with a digit, two hyphens, or a hyphen followed by a digit.
However, in that same spec, the Grammar part:
<class-selector> = '.' <ident-token>
<id-selector> = <hash-token>
As you can see from the token links above, the syntax diagram explicitly specifies that a CSS identifer may begin with two hyphens, and the grammar of an ID selector contradicts with the grammar of a hash-token.
Which definitions should I follow?
UPDATE:
I missed a line in the bottom of the Grammar section:
In <id-selector>, the <hash-token>’s value must be an identifier.
The hash-token diagram must be wrong, as you quoted it:
element names, classes, and IDs in selectors (...) cannot start with a digit, two hyphens, or a hyphen followed by a digit
It is very explicit
Related
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 was wondering what is the difference between quoted and unquoted attributes in css selectors and does that have any effect on performance.
input[type="text"]
/
input[type=text]
Thanks in advance
The above are the same. The quotes are optional for identifiers, but must be used when it is a string.
Some common examples of being a string include:
Containing a space ()
Beginning with a digit (0-9)
Containing a hyphen after a digit
Here's the full spec of an identifier:
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".
Further reading: http://www.w3.org/TR/css3-selectors/#attribute-selectors
I have a CSS Selectory, which identifies screen elements:
DIV[id^=WIN_][id$=_304255502]
...will find an element which starts with WIN_ and ends with _304255502
Is there an equivalent to ^ and $ which would be "contains"? eg. DIV[id*=_3042]
Thanks for any help,
Mark
As mentioned in the comments to your question, the correct answer is the instance substring matching attribute selector:
[id*=xxx]
where ‘xxx’ is the string you want to match against. This is supported by IE7+ and every other modern browser (http://www.quirksmode.org/css/selectors/).
To dive a bit deeper, if the string you’re searching for isn’t a CSS ‘identifier’ then it needs to be enclosed with quotes (either single or double). An identifier:
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.
So if the string you’re searching for doesn’t match that (which looks possible given your sample data) then you’ll have to quote it. Might not be a bad idea to do that anyway.
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.