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.
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.
By having a css file with css rules, I'd like to select only css class (i.e.) .tblGenFixed but not css values for a rule (i.e.) opacity: 0.3 .
This is my regex:
/(\.([\w_]+))/g
This is my alternative solution but it doesn't work
/(?!\{)(\.([\w_]+))(?!\})/g
I have set an example in regex101 here https://regex101.com/r/gG4nN4/1
How can I ignore css rule values ?
See this : Which characters are valid in CSS class names/selectors?
A value will have a digit after the dot. Luckily, valid CSS class names cannot start with a digit :)
Your regexp has to match a dot first, then a letter or - or _
! if you look for whitespace before the dot, a value like .5 will match ...
Try this one : (\.([a-zA-Z_-]{1}[\w-_]+))
Edit :
See this too : Regex to match a CSS class name
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
Relevant quote :
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.
Depending on how your CSS is written, you might be able to get what you are looking for by requiring whitespace before the period:
\W/(\.([\w_]+))/g
Here's a fork of your regex.
Depending on what you are looking for, you might want to skip one of those capture groups:
\W\.([\w_]+)
I'd also warn against parsing CSS with a regex without manually examining the results.
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.