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

HTML

CSS

JavaScript

公開日：2019-02-09

最終更新：2019-02-09

ブログ： https://okayu.qrunch.io/entries/AGk6k6SVvCUzPc8a

はじめに

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

用意した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"]`	×	×