セレクタとは
CSSやJavaScriptを使ってHTMLのDOMを修飾したり取得・操作したりする際、セレクタを指定することになります。
セレクタはHTMLのタグであったり、id属性やclass属性だったりと様々な種類があります。
まずはCSSとJavaScript、それぞれどのようにしてセレクタを使用するかを確認しておきます。
CSSを記述する際のセレクタ
CSSを記述する際は、下記のように”セレクタ {プロパティ: 値}”の形式で指定します。
h1（セレクタ） { color（プロパティ）: #333333;（値） }
JavaScriptを記述する際のセレクタ
JavaScriptでは、例えばDOM要素を取得する際に使用する”querySelector()”の引数としてセレクタを指定します。
document.querySelector('h1');
セレクタの指定方法まとめ
それではHTML要素のタグ名やid属性、class属性などを指定するときに、セレクタをどのように書けば良いかを確認していきましょう。
タグ名のセレクタ
タグ名を指定する際は、次のようにタグ名をそのまま使用します。
- CSS
h1 { color: #333333; }
- JavaScript
document.querySelector('h1');
id属性のセレクタ
id属性を指定する際は、次のように”#”をid名（例: example）の前に付けます。
- CSS
#example { color: #333333; }
- JavaScript
document.querySelector('#example');
class属性のセレクタ
class属性を指定する際は、次のように”.”をclass名（例: example）の前に付けます。
- CSS
.example { color: #333333; }
- JavaScript
document.querySelector('.example');
全称セレクタ
すべての要素を指定する際は、”*”を使用します。
- CSS
* { color: #333333; }
- JavaScript
document.querySelector('*');
複数セレクタ
複数の要素を指定する際は、次のように”,”で繋ぎます。
- CSS
h1, h2 { color: #333333; }
- JavaScript
document.querySelectorAll('h1, h2');
子孫セレクタ
特定の要素を子孫に持つ要素を指定する際は、次のように「親要素 スペース 子孫要素」と書きます。
- CSS
div p { color: #333333; }
- JavaScript
document.querySelector('div p');
子要素セレクタ
特定の要素を直下に持つ要素を指定する際は、次のように「親要素 > 子孫要素」と書きます。
- CSS
div > p { color: #333333; }
- JavaScript
document.querySelector('div > p');
属性セレクタ
特定の属性を指定する際は、次のように「[属性名]」と書きます。
- CSS
a[href] { color: #333333; }
- JavaScript
document.querySelector('a[href]');
type属性を取得する場合
属性セレクタを使うと、例えばinput要素のtypeを取得することができます。
- CSS
input[type=submit] { color: #333333; }
- JavaScript
document.querySelector('input[type=submit]');
以上、CSSやJavaScriptを扱う上で必須となるセレクタについてのまとめでした。
