Clever Geek Handbook

Valid CSS classes?

Are the following valid class names?

.text-moretext

.text&text

.text_text

.text(text)

I suppose any CSS class allowed to accommodate custom chracters?

+2


source to share


4 answers


  • .text-moretext

    allowed
  • .text&text

    not allowed as it is a special character in HTML
  • .text_text

    allowed
  • .text(text)

    is not allowed


+2


source


Yes, you can use any character in the class name except a space that separates the class names: class is cdata-list . Some characters will need to slip away. For HTML:

<div class="text&amp;moretext"> ... </div>

and in the selector:



.text\&text { ... }
.text\(text\) { ... }

It is generally best avoided if possible for sanity coding, but yes, you can do this if you need to.

+5


source


As per CSS Specification Section 4.1.3 :

In CSS, identifiers (including element names, classes, and identifiers in selectors) can only contain the characters [a-zA-Z0-9] and ISO 10646 characters U + 00A1 and above, plus the hyphen (-) and underscore (_); they cannot start with a number or a hyphen followed by a number. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next clause). For an instance, the identifier is "B&W?" can be written as "B \ & W \?" or "B \ 26 W \ 3F".

So .text-moretext

and .text_text

are valid identifiers (and can be used as class names), while .text&text

and .text(text)

are not (although, as pointed @bobince, you can avoid the special characters in order to use them as part of the ID).

+5


source


The characters AZ, az, numbers, hyphen (-), and underscore (_) are common characters allowed in a class name. (There are a few more cultural symbols, but no other punctuation marks.)

So, text-moretext

and text_text

are valid class names.

When in doubt, be limited to punctuation and exotic characters. Some older browsers may not always be correct ...

+1


source






More articles:


All Articles