{"id":388,"date":"2017-03-15T07:40:43","date_gmt":"2017-03-15T07:40:43","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=388"},"modified":"2017-03-29T17:48:18","modified_gmt":"2017-03-29T12:18:18","slug":"characters-valid-css-class-names-selectors","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/characters-valid-css-class-names-selectors\/","title":{"rendered":"[Solved-8 Answers] Which characters are valid in CSS class names \/ selectors"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<p>What characters\/symbols are allowed within CSS class selectors? we know that the following characters are\u00a0invalid, but what characters are\u00a0valid?<br \/>\n~ ! @ $ % ^ & * ( ) + = , . \/ \u2018 ; : \u201d ? > < [ ] \\ { } | ` #<\/p>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>There are no CSS classes.<\/li>\n<li>The question logically splits to two questions:<\/li>\n<li>can you start a class name with a digit in HTML, and if it does, how do you use the corresponding class selector in CSS?<\/li>\n<li>Various HTML specifications impose various restrictions on class names, but in browser practice, and according to HTML5, there are no limitations, except that a class name cannot contain whitespace characters. So\u00a0class=000000-8\u00a0is valid.<\/li>\n<li>By CSS syntax rules, a CSS identifier cannot being with an\u00a0unescaped\u00a0digit. Therefore, a selector like\u00a0.000000-8\u00a0is invalid. But the digit can be escaped, by\u00a0CSS escaping rules(http:\/\/www.w3.org\/TR\/css3-syntax\/#escaping) the selector<\/li>\n<li>.\\30 00000-8or equivalently,.\\00003000000-8 is valid and matches an element with\u00a0class=000000-8.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Basically, a name must begin with an underscore (_), a hyphen (-), or a letter(a\u2013z), followed by any number of hyphens, underscores, letters, or numbers.<\/li>\n<li>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.<\/li>\n<li>-?[_a-zA-Z]+[_a-zA-Z0-9-]*<\/li>\n<li>Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>The article explains how to escape any character in CSS (and JavaScript),If you were to give an element an ID value of ~!@$%^&*()_+-=,.\/\u2019;:\u201d?><[]{}|`#, the selector would look like this:<\/li>\n<\/ul>\n<p><strong>\u00a0 \u00a0 CSS:<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cstyle%3E%0A%20%20%23%5C~%5C!%5C%40%5C%24%5C%25%5C%5E%5C%26%5C*%5C(%5C)%5C_%5C%2B-%5C%3D%5C%2C%5C.%5C%2F%5C\u2019%5C%3B%5C%3A%5C%22%5C%3F%5C%3E%5C%3C%5C%5B%5C%5D%5C%5C%5C%7B%5C%7D%5C%7C%5C%60%5C%23%0A%20%20%7B%0A%20%20%20%20background%3A%20blue%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0AJavaScript%3A%0A%3Cscript%3E%0A%20%09%20%2F%2F%20document.getElementById%20or%20similar%0A%20%20document.getElementById(\u2018~!%40%24%25%5E%26*()_%2B-%3D%2C.%2F%5C\u2019%3B%3A%22%3F%3E%3C%5B%5D%5C%5C%7B%7D%7C%60%23\u2019)%3B%0A%20%20%09%2F%2F%20document.querySelector%20or%20similar%0A%20%20%24(\u2018%23%5C%5C~%5C%5C!%5C%5C%40%5C%5C%24%5C%5C%25%5C%5C%5E%5C%5C%26%5C%5C*%5C%5C(%5C%5C)%5C%5C_%5C%5C%2B-%5C%5C%3D%5C%5C%2C%5C%5C.%5C%5C%2F%5C%5C%5C\u2019%5C%5C%3B%5C%5C%3A%5C%5C%22%5C%5C%3F%5C%5C%3E%5C%5C%3C%5C%5C%5B%5C%5C%5D%5C%5C%5C%5C%5C%5C%7B%5C%5C%7D%5C%5C%7C%5C%5C%60%5C%5C%23\u2019)%3B%0A%3C%2Fscript%3E%0A\u201d message=\u201dcss selectors\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<p>The complete regular expression is:<\/p>\n<ul>\n<li>-?(?:[_a-z]|[\\200-\\377]|\\\\[0-9a-f]{1,6}(\\r\\n|[ \\t\\r\\n\\f])?|\\\\[^\\r\\n\\f0-9a-f])(?:[_a-z0-9-]|[\\200-\\377]|\\\\[0-9a-f]{1,6}(\\r\\n|[ \\t\\r\\n\\f])?|\\\\[^\\r\\n\\f0-9a-f])*<\/li>\n<li>\u201c-\u201d and \u201c_\u201d are not allowed in your listed character if used directly. But you can encode them using a backslash foo\\~bar or using the unicode notation foo\\7E bar.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<p>Any character except NUL is allowed in CSS class names in CSS (If CSS contains NUL ,the result is undefined).<\/p>\n<ul>\n<li>The links to\u00a0explanation(http:\/\/mathiasbynens.be\/notes\/css-escapes)\u00a0and\u00a0demos\u00a0(http:\/\/mathiasbynens.be\/demo\/crazy-class)showing how to use these names.\u00a0Written down\u00a0in CSS code, a class name\u00a0may need escaping, but that doesn\u2019t change the class name. E.g. an unnecessarily over-escaped representation will look different from other representations of that name, but it still refers to the same class name.<\/li>\n<li>Most other (programming) languages don\u2019t have that concept of escaping variable names (\u201cidentifiers\u201d), so all representations of a variable have to look the same. This is not the case in CSS.<\/li>\n<li>Note that in HTML there is no way to include\u00a0space characters (space, tab, line feed, form feed and carriage return)(http:\/\/www.w3.org\/TR\/html\/infrastructure.html#space-character) \u00a0in a\u00a0class name<\/li>\n<li>attribute(http:\/\/www.w3.org\/TR\/html\/dom.html#classes) , because they already separate classes from each other.<br \/>\nSo, if you need to turn a random string into a CSS class name: look out NUL and space, and escape (accordingly for CSS or HTML).<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>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.<\/li>\n<li>Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier \u201cB&W?\u201d may be written as \u201cB\\&W\\?\u201d or \u201cB\\26 W\\3F\u201d.<\/li>\n<li>In CSS, identifiers may begin with \u2018-\u2018 (dash) or \u2018_\u2019 (underscore). Keywords and property names beginning with \u2018-\u2018 or \u2018_\u2019 are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:<\/li>\n<li>\u2018-\u2018 + vendor identifier + \u2018-\u2018 + meaningful name<\/li>\n<li>\u2018_\u2019 + vendor identifier + \u2018-\u2018 + meaningful name<\/li>\n<li>For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.<\/li>\n<li>Other known examples:<\/li>\n<li>-moz-box-sizing<\/li>\n<li>-moz-border-radius<\/li>\n<li>-wap-accesskey<\/li>\n<li>An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS.<\/li>\n<li>Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors.<\/li>\n<li>CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<p><strong>CSS Specification:<\/strong><\/p>\n<ul>\n<li>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.<\/li>\n<li>Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code.<\/li>\n<li>For instance, the identifier \u201cB&W?\u201d may be written as \u201cB\\&W\\?\u201d or \u201cB\\26 W\\3F\u201d.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>Since HTML5 it\u2019s been valid to start an HTML element ID with a number. For example<\/li>\n<\/ul>\n<div id=\"10\">\n<ul>\n<li>.However that doesn\u2019t mean that CSS have an ID selector starting with a number. For example, this will not work:<br \/>\n[pastacode lang=\u201dcss\u201d manual=\u201d%2310%20%7B%20color%3A%20red%3B%20%7D\u201d message=\u201dcss selectors\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]<\/li>\n<\/ul>\n<\/div>\n<div id=\"10\">\n<ul>\n<li>because CSS is not valid to start ID with a number. CSS simply doesn\u2019t allow selectors to begin with a number. The relevant part of the specification states:<\/li>\n<li>However, you can easily work around this by using an attribute selector:<\/li>\n<\/ul>\n<\/div>\n[pastacode lang=\u201dcss\u201d manual=\u201d%5Bid%3D%2210%22%5D%20%7Bcolor%3A%20red%3B%7D%0A\u201d message=\u201dcss selectors\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>However, another possibility is to use a unicode character instead of a number. For example, instead of the attribute selector, you can do this:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23%5C31%200%20%7Bcolor%3A%20red%3B%7D%0A\u201d message=\u201dcss coding\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>The same number and selector rules apply with class names.<\/li>\n<li>You can write a class starting with a number in HTML but to get the selector to work in CSS you either need to use the attribute selector or escape it with unicode.<\/li>\n<li>To show the prior example with a class instead:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%2210%22%3Ehello%3C%2Fdiv%3E%0A\u201d message=\u201dcss selectors examples\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p>You can either do this:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%5Bclass%3D%2210%22%5D%20%7Bcolor%3A%20red%3B%7D%0A\u201d message=\u201dcss selectors examples\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>Or this:<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d.%5C31%200%20%7Bcolor%3A%20red%3B%7D%0A\u201d message=\u201dcss tags\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This article provides some of the basic informations on\u00a0css form , css coding , form css , selector , css tags , id name , css notes , css selectors examples , css selectors , html select , selector css , css3 selectors , css not selector , select html , css select , css id selector , select option css , html selector , select box css , selection boxes , css parent selector , css element , select dropdown css , css selectors examples , css editor online , css id , form css , css table design , horizontal menu css , custom select box css , css properties , css class selector , dropdown css style , css table generator , external css , inline css , css text effects , css tabs , checkbox css , color css , css dropdown , css hover effects , css button style , img css , css table style , css compressor , css display table , validate css , css checkbox , css zoom , span css , blockquote css , radio button css , css style tag , css footer , css transparent , css background transparent , css clip.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM What characters\/symbols are allowed within CSS class selectors? we know that the following characters are\u00a0invalid, but what characters are\u00a0valid? ~ ! @ $ % ^ &#038; * ( ) + = , . \/ \u2018 ; : \u201d ? > < [ ] \\ { } | ` # SOLUTION 1: There are no [&hellip;]\n<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[776,781,778,774,779,787,784,785,777,786,783,782,772,775,773,780],"class_list":["post-388","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-aphrodite-generates-invalid-css-selectors","tag-complex-css-selector-for-parent-of-active-child","tag-css-class-selector","tag-css-character-escape-sequences","tag-css-class-selectors-not-changing-anything","tag-css-selector-for-foo-that-contains-bar","tag-css-selector-for-first-element-with-class","tag-css-selector-that-applies-to-elements-with-two-classes","tag-css-selectors-reference","tag-is-it-possible-to-apply-css-to-half-of-a-character","tag-is-there-a-previous-sibling-css-selector","tag-is-there-a-css-parent-selector","tag-is-there-a-workaround-to-make-css-classes-with-names-that-start-with-numbers-valid","tag-underscores-in-class-and-id-names","tag-unicode-characters-for-class-names","tag-why-can-class-name-not-start-with-a-number"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=388"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/388\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}