HTMLセレクタについて

こんにちは。就労移行支援事業所Re:cafeです。

インターネットは生活に欠かせないものとなっていますよね。

今回のブログでは、HTMLのセレクタについて考えてみようと思います。

セレクタとはHTML等の要素にスタイルを適用するかを指定します。

ブラウザがWebページを表示する際に命令を受け取りますが、その命令を何に出すのかを決めているのがセレクタの役割となります。

セレクタはHTMLと他の言語（CSS、JS）をつなぐものでHTML側はターゲットとなる要素（タグ、クラス、ID）を用意する。CSS側はセレクタを使ってデザインを指定する。JavaScript側はセレクタを使って、動きを指定する。という役割があります。

セレクタが無い場合、HTMLのそれぞれのタグに直接デザインを書く必要がありますが、セレクタを使うことで、1行書くだけでサイト内の複数ボタンのデザインを一度に変えられる一括操作、マウスが乗ったときだけ、特定のリストなどの条件指定、HTMLとCSSを切り離して管理する事が出来ます。

セレクタの種類は名字のような分類を指定する要素セレクタ、特定の特徴で呼ぶクラスセレクタ、特定の番号などで呼び出すIDセレクタがあります。また「*」はページ内のすべての要素に適用する事が出来ます。

セレクタの優先順位は、ピンポイントで指定するIDセレクタ、グループで指定するクラスセレクタ、分類で指定する要素セレクタとなります。

組み合わせセレクタは要素同士の親子関係や階層構造を使って指定します。

(A B) div pとするとdivの中にあるすべてのpタグに適用されます。

子セレクタは(A>B)同じ階層で直下の子要素のみに適用されます。

一般兄弟セレクタは(A~B)同じ階層で、Aより後ろにあるすべてのBに適用されます。

属性セレクタはHTMLタグの中に書かれた属性(href,type,target)などを条件に指定します。

target属性を持っているすべて、input[type=”text”]はinputタグの中で、type

がtextのものに適用。a[href^=”https”]はURLが「https」から始まるリンクだけに適用されます。

CSS側では.btnというクラスのHTML要素を赤くする場合、

.btn　{

.btn { background-color: red;

}

HTML側では

<button class=”btn”>送信ボタン</button>

という使い方をします。

JavaScriptでは

ボタンが押されたら文字を変えるという例で、

const myButton=document.querySelector(‘.btn’);

myButton.addEventListener(‘click’,()=>{

              alert(‘ボタンが押されました’);

});

セレクタはCSSだけではなくWeb制作全般で使われる共通のルールというものです。セレクタの種類、使い方をいくつか挙げてみましたが、色々な種類があり、とても難しく感じますね。