{"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~ ! @ $ % ^ &amp; * ( ) + = , . \/ &#8216; ; : &#8221; ? &gt; &lt; [ ] \\ { } | ` #<\/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=&#8221;banner&#8221;]\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 ~!@$%^&amp;*()_+-=,.\/&#8217;;:&#8221;?&gt;&lt;[]{}|`#, the selector would look like this:<\/li>\n<\/ul>\n<p><strong>\u00a0 \u00a0 CSS:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css selectors<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;style&gt;<br\/>  #\\~\\!\\@\\$\\%\\^\\&amp;\\*\\(\\)\\_\\+-\\=\\,\\.\\\/\\&#039;\\;\\:\\&quot;\\?\\&gt;\\&lt;\\[\\]\\\\\\{\\}\\|\\`\\#<br\/>  {<br\/>    background: blue;<br\/>  }<br\/>&lt;\/style&gt;<br\/>JavaScript:<br\/>&lt;script&gt;<br\/> \t \/\/ document.getElementById or similar<br\/>  document.getElementById(&#039;~!@$%^&amp;*()_+-=,.\/\\&#039;;:&quot;?&gt;&lt;[]\\\\{}|`#&#039;);<br\/>  \t\/\/ document.querySelector or similar<br\/>  $(&#039;#\\\\~\\\\!\\\\@\\\\$\\\\%\\\\^\\\\&amp;\\\\*\\\\(\\\\)\\\\_\\\\+-\\\\=\\\\,\\\\.\\\\\/\\\\\\&#039;\\\\;\\\\:\\\\&quot;\\\\?\\\\&gt;\\\\&lt;\\\\[\\\\]\\\\\\\\\\\\{\\\\}\\\\|\\\\`\\\\#&#039;);<br\/>&lt;\/script&gt;<\/code><\/pre> <\/div>\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 &#8220;B&amp;W?&#8221; may be written as &#8220;B\\&amp;W\\?&#8221; or &#8220;B\\26 W\\3F&#8221;.<\/li>\n<li>In CSS, identifiers may begin with &#8216;-&#8216; (dash) or &#8216;_&#8217; (underscore). Keywords and property names beginning with &#8216;-&#8216; or &#8216;_&#8217; are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:<\/li>\n<li>&#8216;-&#8216; + vendor identifier + &#8216;-&#8216; + meaningful name<\/li>\n<li>&#8216;_&#8217; + vendor identifier + &#8216;-&#8216; + 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=&#8221;banner&#8221;]\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 &#8220;B&amp;W?&#8221; may be written as &#8220;B\\&amp;W\\?&#8221; or &#8220;B\\26 W\\3F&#8221;.<\/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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css selectors<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#10 { color: red; }<\/code><\/pre> <\/div><\/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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css selectors<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">[id=&quot;10&quot;] {color: red;}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css coding<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">#\\31 0 {color: red;}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css selectors examples<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;10&quot;&gt;hello&lt;\/div&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p>You can either do this:<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css selectors examples<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">[class=&quot;10&quot;] {color: red;}<\/code><\/pre> <\/div>\n<p>Or this:<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css tags<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.\\31 0 {color: red;}<\/code><\/pre> <\/div>\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? ~ ! @ $ % ^ &amp; * ( ) + = , . \/ &#8216; ; : &#8221; ? &gt; &lt; [ ] \\ { } | ` # SOLUTION 1: There are no [&hellip;]<\/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}]}}