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.
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.
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.
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.
This question already has answers here:
CSS attribute selectors: The rules on quotes (", ' or none?)
(2 answers)
Closed last year.
e.g.:
a[href="val"]
Does "val" need to have quotes around it? Single or double are acceptable? What about for integers?
TLDR: Quotes are required unless the value meets the identifier specification for CSS2.1
The CSS spec might say they are optional, but the real world presents a different story. When making a comparison against the href attribute you will need to use quotes (single or double work in my very limited testing - latest versions of FF, IE, Chrome.)
Interestingly enough the css spec link referenced by #Pekka happens to use quotes around their href-specific examples.
And it's not just due to non-alpha characters like the period or slashes that give this unique situation a quote requirement - using a partial match selector ~= doesn't work if you just use the "domain" in "domain.com"
Ok, every answer here is wrong (including my own previous answer.) The CSS2 spec didn't clarify whether quotes are required in the selector section itself, but the CSS3 spec does and quotes the rule as a CSS21 implementation:
http://www.w3.org/TR/css3-selectors/
Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.
And here is the identifier info:
http://www.w3.org/TR/CSS21/syndata.html#value-def-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".
My answer seemed correct but that's because the '~=' is a white-space selector comparator so it will never match a partial string inside an href value. A '*=' comparator does work however. And a partial string like 'domain' does work for matching href='www.domain.com'. But checking for a full domain name would not work because it violates the identifier rule.
According to the examples in the CSS 2.1 specs, quotes are optional.
In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":
span[class=example] { color: blue; }
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Numbers are treated like strings, i.e. they can be quoted, but they don't have to.
No, they don't have to have quotes, tough in order to avoid ambiguities many people do use quotes, which are needed if the value contains whitespace.
Either single or double quotes are fine, and integers will be treated the same way (css does not have a distinction between strings and integers).
See the examples in the spec.
They do not need to be quoted.
There is also no distinction between strings/doubles/integers. CSS isn't Turing-complete, let alone typed.