Allowed characters for CSS identifiers

by

The charset doesn’t matter. The allowed characters matters more. Check the CSS specification. Here’s a cite of relevance:

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".

Update: As to the regex question, you can find the grammar here:

ident      -?{nmstart}{nmchar}*

Which contains of the parts:

nmstart    [_a-z]|{nonascii}|{escape}
nmchar     [_a-z0-9-]|{nonascii}|{escape}
nonascii   [\240-\377]
escape     {unicode}|\\[^\r\n\f0-9a-f]
unicode    \\{h}{1,6}(\r\n|[ \t\r\n\f])?
h          [0-9a-f]

This can be translated to a Java regex as follows (I only added parentheses to parts containing the OR and escaped the backslashes):

String h = "[0-9a-f]";
String unicode = "\\\\{h}{1,6}(\\r\\n|[ \\t\\r\\n\\f])?".replace("{h}", h);
String escape = "({unicode}|\\\\[^\\r\\n\\f0-9a-f])".replace("{unicode}", unicode);
String nonascii = "[\\240-\\377]";
String nmchar = "([_a-z0-9-]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
String nmstart = "([_a-z]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
String ident = "-?{nmstart}{nmchar}*".replace("{nmstart}", nmstart).replace("{nmchar}", nmchar);

System.out.println(ident); // The full regex.

Update 2: oh, you’re more a PHP’er, well I think you can figure how/where to do str_replace?

More Related Contents:

  1. Using regular expression in css?
  2. override css for html5 form validation/required popup
  3. How do I stop Chrome from yellowing my site’s input boxes?
  4. Use CSS to automatically add ‘required field’ asterisk to form inputs
  5. Can I have multiple background images using CSS?
  6. SVG data image not working as a background-image in a pseudo element
  7. Using CSS for a fade-in effect on page load
  8. Why bottom:0 doesn’t work with position:sticky?
  9. what exactly is device pixel ratio?
  10. z-index is canceled by setting transform(rotate)
  11. Twitter Bootstrap Multilevel Dropdown Menu
  12. CSS selector for attribute names based on a wildcard
  13. Parse a CSS file with PHP
  14. GWT theme style overrides my css style
  15. Remove Safari/Chrome textinput/textarea glow
  16. What does ‘&.’ in ‘&.sub-title’ indicates in scss?
  17. Multiple descendant children selector with css [duplicate]
  18. Create a row of flexbox items with a max height defined by one child [duplicate]
  19. Transparent hollow or cut out shape in HTML
  20. Can we change style? [duplicate]
  21. PHP regex for validating a URL
  22. Pass function or mixin by reference in SASS
  23. How to add a margin to a table row [duplicate]
  24. Clip/Crop background-image with CSS
  25. CSS negative z-index: what does it mean?
  26. How to make a Bootstrap 4 full width dropdown in Navbar?
  27. Why doesn’t my child element inherit color from its parent when parent has more specific selector?
  28. Stacking DIVs on top of each other?
  29. Div with cut out edges, border and transparent background
  30. Select specific element before other element

Leave a Comment