Can I use Chinese characters in CSS class names?

Question

Is it possible to use Chinese class names for my CSS classes? I'm trying to get the Chinese word with jQuery and then create img elements with classes named by the Chinese words.

I have for instance a file named 2020_Cars_哈喽_1.jpg, and I created a code that takes the year, the category (Cars), and the Chinese word which is the name of the album, and creates an img element with classes according to the file name in order to filter the images later.

I have an example here where you can see the categories which translated to classes without any problem, and the %46%bd% which are Chinese words that I could not transform successfully into a class name.

Any suggestions please?

The jQuery code which takes the file name and split it into classes:

 $.ajax({
     url: dir,
     success: function(data){
         $(data).find("a:contains(.JPG)").each(function(){
             // will loop through
             var images = $(this).attr("href");
             var splittedName = images.split('_');
             var classesToAdd = 'thumbnailpic';
             for(var i=0;i<3;i++){
                 classesToAdd+=' '+splittedName[i];
             }

             if(years.indexOf(splittedName[0])===-1){
                 years.push(splittedName[0]);
             }
             if(categories.indexOf(splittedName[1])===-1) {
                 categories.push(splittedName[1]);
             }
             if(albums.indexOf(splittedName[2])===-1) {
                 albums.push(splittedName[2]);
             }

             $('.gallery').append('<img class="'+classesToAdd+'" src="'+dir+'/'+images+'"'+'>');

         });

         for(var a=0;a<years.length;a++){
             $('.years').append('<div id="filter-button" class="filter-select" >'+years[a]+'</div>');
         }

         for(var b=0;b<categories.length;b++){
             $('.categories').append('<div id="filter-button" class="filter-select">'+categories[b]+'</div>');
         }

         for(var c=0;c<albums.length;c++){
             $('.albums').append('<div id="filter-button" class="filter-select">'+albums[c]+'</div>');
         }
         hideBigPic();
         $('.filters').fadeIn(1000);
         $('.gallery').fadeIn(1000);
     }
 });

Thank you in advance!

Possible duplicate of [Which characters are valid in CSS class names/selectors?](https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors) — Sebastian Brosch, Nov 17 '17 at 14:27

score 2 · Accepted Answer · answered Nov 17 '17 at 14:41

Yes, you can use Chinese characters as class names and selectors.

div {
  width: 100px;
  height: 100px;
}

.tomato {
  background: tomato;
}

.蓝色 {
  background: navy;
}

<div class="蓝色"></div>
<div class="tomato"></div>
<br>
<button onclick="console.log(document.querySelector('.蓝色'))">Find Element</button>

But it looks like the real question here is how do you turn URL encoded characters (%46 etc) back into real characters and for that you need decodeURIComponent

console.log(decodeURIComponent('%E8%93%9D'))

Hope this answers all of your questions.

Can I use Chinese characters in CSS class names?

1 Answers1