シャフト株式会社

セレクタとは

セレクタとは

cssにおいてセレクタは、非常に重要な考え方です。例えば、以下の命令文があったとします。

p { color:green }

これは、pタグで囲われたテキストに関しては、文字色を緑にする、という命令文ですね。セレクタとは、この例でいうと、pタグに該当する部分、つまり何に対して、{}内の命令文を適用するかの選択対象を、セレクタと呼びます。

body { color:#gray } という命令文なら、「body」がセレクタとなります。

この「セレクタ」に選べる対象は、大きく分けて3種類あります。「html要素」と「クラス名」と「ID名」です。

html要素をセレクタにする

pやbodyなど、「htmlの要素」をセレクタにする方法です。例えば上記の例のように、pをセレクタに選んで命令を書くと、ページ内のpで囲われたテキストすべてが命令適用の対象となります。

クラス名をセレクタにする

html要素に割り当てた「クラス名」を、cssのセレクタに選ぶこともできます。例えばhtmlの中で、

<p class="test">あいうえお</p>

というように、pタグの中にtestという名前のクラスを割り当てたとします。そしてpタグの中でも、testというクラスが割り当てられたものにだけ命令を適用する場合、cssには

.test { color:green }

と書きます。html要素をセレクタにする場合と異なり、頭に「.」が付いているものが、クラスをセレクタにしたものです。こうすると以下のように、普通のpタグ部分には文字色は適用されず、testというクラス名を与えられたテキストだけ緑色になります。

クラス名にtestと付けたpタグ文章

クラス名を付けていないpタグ文章

ID名をセレクタにする

クラスメイト同じように、html要素に割り当てられたID名をセレクタにすることも可能です。例えば、

<p id="test2">かきくけこ</p>

html内で、上記のようなIDをpタグに割り当てたとします。このテキストのみに命令を与える場合、cssには

#test2 { color:orange }

と書きましょう。クラス名の場合は頭に「.」でしたが、ID名をセレクタにする場合は、頭が「#」になります。ページに表示した時の結果は、以下のようになります。

ID名にtest2と付けたpタグ文章

ID名を付けていないpタグ文章

クラスとIDの違い

上記文章を読むと、クラスもIDも同じもののように見えます。実際、機能的にはほぼ同じなのですが、明確な違いが一つだけあります。

クラス名はページの中で何度でも使用できるのですが、ID名はページ中で一度しか使えない、という特徴があります。従って、ページ中に必ず一度しか使えない内容に関してはIDを。ページ中に何度も使用する可能性があるものは、クラス名を使用するようにしましょう。この、何度も使えるか、一度しか使えないのか、というのが、クラスとIDの違いです。

Copyright © SCHAFT Inc. All Rights Reserved.