技術ブログを開設する
ログイン
もっと気軽にアウトプットできる技術ブログプラットフォーム

はじめに

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

用意した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セレクターのページ見てると結構楽しいです。
列結合子ってどんななんでしょう?

関連記事

この記事へのコメント

まだコメントはありません
0
@okayuの大して技術的ではないブログ
0
このエントリーをはてなブックマークに追加