はじめに
ちょっと気になったので実際に調べてみました。
用意した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セレクターのページ見てると結構楽しいです。
列結合子ってどんななんでしょう?
関連記事
まだコメントはありません
この記事へのコメント