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
Related
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
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.
While inspecting some part of css of facebook i've noticed some class like this "_5pcb _5tmf _5p3y _50f3". Does the underscore has any special use or just for aesthetic and readability? I'm aware that underscores and hypens are valid character but I'm just wondering if the underscore in the front has a special use
The underscore itself has no special meaning (and I don't find it very aesthetic), but you cannot start class names with a digit, so it's probably just padding for that.
Basically, 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 must be a letter or underscore, and the name must be at least 2 characters long.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Note that, according to the CSS grammar, a rule starting with TWO hyphens, e.g. --className, is invalid.
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]"