Which characters are valid in CSS class names selectors

Question

What characters symbols are allowed within the CSS class selectors  I know that the following characters are invalid  but what characters are valid                amp                             gt   lt

User · Answer

For those looking for a workaround  you can use an attribute selector  for instance  if your class begins with a number  Change    000000-8 background url       images common 000000-0 8 png       DOESN T WORK        to this    class  000000-8   background url       images common 000000-0 8 png       WORKS         Also  if there are multiple classes  you will need to specify them in selector I think   Sources    https   benfrain com when-and-where-you-can-use-numbers-in-id-and-class-names  Is there a workaround to make CSS classes with names that start with numbers valid

User · Answer

We can use all characters as class name  Even like   and   Just we have to escape it with     x000D   x000D   test  123     color  red      test  123     color  blue      test  123     color  green      test  lt 123     color  brown      test  123     color  purple      test  123     color  tomato    x000D   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test lt 123  gt test lt 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt  x000D   x000D   x000D

User · Answer

For HTML5 CSS3 classes and IDs can start with numbers

User · Answer

The complete regular expression is   -      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      So all of your listed character except    -    and         are not allowed if used directly  But you can encode them using a backslash foo  bar or using the unicode notation foo 7E bar

User · Answer

You can check directly at the CSS grammar  Basically1  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 must2 be a  letter or underscore  and the name must be at least 2 characters long  -   a-zA-Z    a-zA-Z0-9-    In short  the previous rule translates to the following  extracted from the W3C spec    In CSS  identifiers  including element names  classes  and IDs in selectors  can contain only the characters  a-z0-9  and ISO 10646 characters U 00A0 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  quot B amp W  quot  may be written as  quot B amp W  quot  or  quot B 26 W 3F quot    Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions  as in -moz-opacity  1 It s all made a bit more complicated by the inclusion of escaped unicode characters  that no one really uses   2 Note that  according to the grammar I linked  a rule starting with TWO hyphens  e g  --indent1  is invalid   However  I m pretty sure I ve seen this in practice

User · Answer

To my surprise most answers here are wrong  It turns out that   Any character except NUL is allowed in CSS class names in CSS   If CSS contains NUL  escaped or not   the result is undefined   CSS-characters    Mathias Bynens  answer links to explanation and demos showing how to use these names  Written down in CSS code  a class name may need escaping  but that doesn   t 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   Most other  programming  languages don   t have that concept of escaping variable names     identifiers      so all representations of a variable have to look the same  This is not the case in CSS   Note that in HTML there is no way to include space characters  space  tab  line feed  form feed and carriage return  in a class name attribute  because they already separate classes from each other   So  if you need to turn a random string into a CSS class name  take care of NUL and space  and escape  accordingly for CSS or HTML   Done

User · Answer

For HTML5 CSS3 classes and IDs can start with numbers

User · Answer

The complete regular expression is   -      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      So all of your listed character except    -    and         are not allowed if used directly  But you can encode them using a backslash foo  bar or using the unicode notation foo 7E bar

User · Answer

To my surprise most answers here are wrong  It turns out that   Any character except NUL is allowed in CSS class names in CSS   If CSS contains NUL  escaped or not   the result is undefined   CSS-characters    Mathias Bynens  answer links to explanation and demos showing how to use these names  Written down in CSS code  a class name may need escaping  but that doesn   t 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   Most other  programming  languages don   t have that concept of escaping variable names     identifiers      so all representations of a variable have to look the same  This is not the case in CSS   Note that in HTML there is no way to include space characters  space  tab  line feed  form feed and carriage return  in a class name attribute  because they already separate classes from each other   So  if you need to turn a random string into a CSS class name  take care of NUL and space  and escape  accordingly for CSS or HTML   Done

User · Answer

For those looking for a workaround  you can use an attribute selector  for instance  if your class begins with a number  Change    000000-8 background url       images common 000000-0 8 png       DOESN T WORK        to this    class  000000-8   background url       images common 000000-0 8 png       WORKS         Also  if there are multiple classes  you will need to specify them in selector I think   Sources    https   benfrain com when-and-where-you-can-use-numbers-in-id-and-class-names  Is there a workaround to make CSS classes with names that start with numbers valid

User · Answer

I   ve answered your question in-depth here  http   mathiasbynens be notes css-escapes  The article also explains how to escape any character in CSS  and JavaScript   and I made a handy tool for this as well  From that page      If you were to give an element an ID value of        amp      -           lt          the selector would look like this       CSS        lt style gt                   amp           -                    gt   lt                          background  hotpink       lt  style gt        JavaScript        lt script gt       document getElementById or similar   document getElementById         amp      -           gt  lt                   document querySelector or similar                            amp                -                               gt    lt                               lt  script gt

User · Answer

Read the W3C spec   this is CSS 2 1  find the appropriate version for your assumption of browsers   edit  relevant paragraph follows      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 amp W   may be   written as  B  amp W    or  B 26 W 3F     edit 2  as  mipadi points out in Triptych s answer  there s this caveat  also in the same webpage      In CSS  identifiers may begin with  -     dash  or      underscore   Keywords   and property names beginning with  -    or     are reserved for   vendor-specific extensions  Such   vendor-specific extensions should have   one of the following formats    -    vendor identifier    -    meaningful name        vendor identifier    -    meaningful name       Example s        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       Other known examples    -moz-box-sizing  -moz-border-radius  -wap-accesskey       An initial dash or underscore is   guaranteed never to be used in a   property or keyword by any current or   future level of CSS  Thus typical CSS   implementations may not recognize such   properties and may ignore them   according to the rules for handling   parsing errors  However  because the   initial dash or underscore is part of   the grammar  CSS 2 1 implementers   should always be able to use a   CSS-conforming parser  whether or not   they support any vendor-specific   extensions       Authors should avoid vendor-specific   extensions

User · Answer

I   ve answered your question in-depth here  http   mathiasbynens be notes css-escapes  The article also explains how to escape any character in CSS  and JavaScript   and I made a handy tool for this as well  From that page      If you were to give an element an ID value of        amp      -           lt          the selector would look like this       CSS        lt style gt                   amp           -                    gt   lt                          background  hotpink       lt  style gt        JavaScript        lt script gt       document getElementById or similar   document getElementById         amp      -           gt  lt                   document querySelector or similar                            amp                -                               gt    lt                               lt  script gt

User · Answer

The complete regular expression is   -      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      So all of your listed character except    -    and         are not allowed if used directly  But you can encode them using a backslash foo  bar or using the unicode notation foo 7E bar

User · Answer

You can check directly at the CSS grammar  Basically1  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 must2 be a  letter or underscore  and the name must be at least 2 characters long  -   a-zA-Z    a-zA-Z0-9-    In short  the previous rule translates to the following  extracted from the W3C spec    In CSS  identifiers  including element names  classes  and IDs in selectors  can contain only the characters  a-z0-9  and ISO 10646 characters U 00A0 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  quot B amp W  quot  may be written as  quot B amp W  quot  or  quot B 26 W 3F quot    Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions  as in -moz-opacity  1 It s all made a bit more complicated by the inclusion of escaped unicode characters  that no one really uses   2 Note that  according to the grammar I linked  a rule starting with TWO hyphens  e g  --indent1  is invalid   However  I m pretty sure I ve seen this in practice

User · Answer

You can check directly at the CSS grammar  Basically1  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 must2 be a  letter or underscore  and the name must be at least 2 characters long  -   a-zA-Z    a-zA-Z0-9-    In short  the previous rule translates to the following  extracted from the W3C spec    In CSS  identifiers  including element names  classes  and IDs in selectors  can contain only the characters  a-z0-9  and ISO 10646 characters U 00A0 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  quot B amp W  quot  may be written as  quot B amp W  quot  or  quot B 26 W 3F quot    Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions  as in -moz-opacity  1 It s all made a bit more complicated by the inclusion of escaped unicode characters  that no one really uses   2 Note that  according to the grammar I linked  a rule starting with TWO hyphens  e g  --indent1  is invalid   However  I m pretty sure I ve seen this in practice

User · Answer

My understanding is that the underscore is technically valid  Check out   https   developer mozilla org en underscores in class and id names      errata to the specification published in early 2001 made underscores legal for the first time    The article linked above says never use them  then gives a list of browsers that don t support them  all of which are  in terms of numbers of users at least  long-redundant

User · Answer

We can use all characters as class name  Even like   and   Just we have to escape it with     x000D   x000D   test  123     color  red      test  123     color  blue      test  123     color  green      test  lt 123     color  brown      test  123     color  purple      test  123     color  tomato    x000D   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test lt 123  gt test lt 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt   lt div class  test 123  gt test 123 lt  div gt  x000D   x000D   x000D

User · Answer

Read the W3C spec   this is CSS 2 1  find the appropriate version for your assumption of browsers   edit  relevant paragraph follows      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 amp W   may be   written as  B  amp W    or  B 26 W 3F     edit 2  as  mipadi points out in Triptych s answer  there s this caveat  also in the same webpage      In CSS  identifiers may begin with  -     dash  or      underscore   Keywords   and property names beginning with  -    or     are reserved for   vendor-specific extensions  Such   vendor-specific extensions should have   one of the following formats    -    vendor identifier    -    meaningful name        vendor identifier    -    meaningful name       Example s        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       Other known examples    -moz-box-sizing  -moz-border-radius  -wap-accesskey       An initial dash or underscore is   guaranteed never to be used in a   property or keyword by any current or   future level of CSS  Thus typical CSS   implementations may not recognize such   properties and may ignore them   according to the rules for handling   parsing errors  However  because the   initial dash or underscore is part of   the grammar  CSS 2 1 implementers   should always be able to use a   CSS-conforming parser  whether or not   they support any vendor-specific   extensions       Authors should avoid vendor-specific   extensions

User · Answer

The complete regular expression is   -      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      So all of your listed character except    -    and         are not allowed if used directly  But you can encode them using a backslash foo  bar or using the unicode notation foo 7E bar

User · Answer

Going off of  Triptych s answer  you can use the following 2 regex matches to make a string valid     a-z0-9A-Z -    This is a reverse match that selects anything that isn t a letter  number  dash or underscore for easy removal    -  0-9     This matches 0 or 1 dashes followed by 1 or more numbers at the beginning of a string  also for easy removal   How I use it in PHP     Make alphanumeric with dashes and underscores  removes all other characters   class   preg replace     a-z0-9A-Z -          class     Classes only begin with an underscore or letter  class   preg replace    -  0-9           class     Make sure the string is 2 or more characters long return 2  lt   strlen  class     class

User · Answer

Read the W3C spec   this is CSS 2 1  find the appropriate version for your assumption of browsers   edit  relevant paragraph follows      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 amp W   may be   written as  B  amp W    or  B 26 W 3F     edit 2  as  mipadi points out in Triptych s answer  there s this caveat  also in the same webpage      In CSS  identifiers may begin with  -     dash  or      underscore   Keywords   and property names beginning with  -    or     are reserved for   vendor-specific extensions  Such   vendor-specific extensions should have   one of the following formats    -    vendor identifier    -    meaningful name        vendor identifier    -    meaningful name       Example s        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       Other known examples    -moz-box-sizing  -moz-border-radius  -wap-accesskey       An initial dash or underscore is   guaranteed never to be used in a   property or keyword by any current or   future level of CSS  Thus typical CSS   implementations may not recognize such   properties and may ignore them   according to the rules for handling   parsing errors  However  because the   initial dash or underscore is part of   the grammar  CSS 2 1 implementers   should always be able to use a   CSS-conforming parser  whether or not   they support any vendor-specific   extensions       Authors should avoid vendor-specific   extensions

User · Answer

You can check directly at the CSS grammar  Basically1  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 must2 be a  letter or underscore  and the name must be at least 2 characters long  -   a-zA-Z    a-zA-Z0-9-    In short  the previous rule translates to the following  extracted from the W3C spec    In CSS  identifiers  including element names  classes  and IDs in selectors  can contain only the characters  a-z0-9  and ISO 10646 characters U 00A0 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  quot B amp W  quot  may be written as  quot B amp W  quot  or  quot B 26 W 3F quot    Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions  as in -moz-opacity  1 It s all made a bit more complicated by the inclusion of escaped unicode characters  that no one really uses   2 Note that  according to the grammar I linked  a rule starting with TWO hyphens  e g  --indent1  is invalid   However  I m pretty sure I ve seen this in practice

User · Answer

My understanding is that the underscore is technically valid  Check out   https   developer mozilla org en underscores in class and id names      errata to the specification published in early 2001 made underscores legal for the first time    The article linked above says never use them  then gives a list of browsers that don t support them  all of which are  in terms of numbers of users at least  long-redundant

User · Answer

Read the W3C spec   this is CSS 2 1  find the appropriate version for your assumption of browsers   edit  relevant paragraph follows      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 amp W   may be   written as  B  amp W    or  B 26 W 3F     edit 2  as  mipadi points out in Triptych s answer  there s this caveat  also in the same webpage      In CSS  identifiers may begin with  -     dash  or      underscore   Keywords   and property names beginning with  -    or     are reserved for   vendor-specific extensions  Such   vendor-specific extensions should have   one of the following formats    -    vendor identifier    -    meaningful name        vendor identifier    -    meaningful name       Example s        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       Other known examples    -moz-box-sizing  -moz-border-radius  -wap-accesskey       An initial dash or underscore is   guaranteed never to be used in a   property or keyword by any current or   future level of CSS  Thus typical CSS   implementations may not recognize such   properties and may ignore them   according to the rules for handling   parsing errors  However  because the   initial dash or underscore is part of   the grammar  CSS 2 1 implementers   should always be able to use a   CSS-conforming parser  whether or not   they support any vendor-specific   extensions       Authors should avoid vendor-specific   extensions

User · Answer

Going off of  Triptych s answer  you can use the following 2 regex matches to make a string valid     a-z0-9A-Z -    This is a reverse match that selects anything that isn t a letter  number  dash or underscore for easy removal    -  0-9     This matches 0 or 1 dashes followed by 1 or more numbers at the beginning of a string  also for easy removal   How I use it in PHP     Make alphanumeric with dashes and underscores  removes all other characters   class   preg replace     a-z0-9A-Z -          class     Classes only begin with an underscore or letter  class   preg replace    -  0-9           class     Make sure the string is 2 or more characters long return 2  lt   strlen  class     class

[css] Which characters are valid in CSS class names/selectors?

Examples related to css

Examples related to css-selectors