はじめに

ちょっと気になったので実際に調べてみました。

用意したHTML

<!DOCTYPE html>  
<meta charset="utf-8">  
<style>  
  @keyframes spin {  
    0% {  
      transform: rotate(0deg);  
    }  
    100% {  
      transform: rotate(360deg);  
    }  
  }  
</style>  

<div id="myid" class="myclass" data-my-data="hoge">HOGE</div>  
<script>  
  const selector = ''; // 好きなのを入れる  

  console.log(document.querySelectorAll(selector));  
  document.body.innerHTML += `  
    <style>  
      ${selector} {  
        display: inline-block;  
        animation: spin 2000ms linear infinite;  
      }  
    </style>  
  `;  
</script>

selectorにCSSセレクターを入れます。
CSSがマッチした場合は『HOGE』が回転し、JSがマッチした場合はコンソールに出力されます。

いざ実験

指定したもの	CSSセレクター	CSSの結果	JSの結果
タグ	`div`	○	○
タグ	`DIV`	○	○
タグ	`dIv`	○	○
ID	`#myid`	○	○
ID	`#MYID`	×	×
ID	`#mYiD`	×	×
クラス	`.myclass`	○	○
クラス	`.MYCLASS`	×	×
クラス	`.mYcLaSs`	×	×
属性名	`[data-my-data]`	○	○
属性名	`[DATA-MY-DATA]`	○	○
属性名	`[dAtA-mY-dAtA]`	○	○
属性値	`[data-my-data="hoge"]`	○	○
属性値	`[data-my-data="HOGE"]`	×	×
属性値	`[data-my-data="hOgE"]`	×	×

○: 回転した / 要素を含むNodeListが出力された
×: 回転しなかった / 空のNodeListが出力された

結論

IDやクラスや属性値といった自分で名付けた値は大文字小文字を区別するようです。

おわりに

ちなみに[data-my-data="hOgE" i]とするとCSS・JSともに○でした。
詳しくは: 属性セレクター - CSS: カスケーディングスタイルシート | MDN

IDやクラスで大文字小文字を区別してほしくない場合は、[id="mYiD" i]とすれば良さそうです。

MDNのCSSセレクターのページ見てると結構楽しいです。
列結合子ってどんななんでしょう?

CSSセレクターでの大文字小文字区別について

はじめに

用意したHTML

いざ実験

結論

おわりに

この記事へのコメント

このブログについて

目次

CSSセレクターでの大文字小文字区別について

はじめに

用意したHTML

いざ実験

結論

おわりに

関連記事

この記事へのコメント

このブログについて

目次