セレクタというのは、スタイルシートの中でデザインを適用させる場所を指定する部分です。ここでは、セレクタの基礎編としてよく使用される３つのセレクタのお話をしていきます。
コンテンツ
基本的な３つのセレクタ
基本的な３つのセレクタは次の通りです。
- タイプ（要素）セレクタ
- classセレクタ
- idセレクタ
例えば、こんなHTMLがあったとします。
ボタンで表示を切り替えてご覧ください。
See the Pen css-selector-basis01 by kenichi (@ken81) on CodePen.
上記のソースコードをブラウザで表示させると、「ここの色を変えていくよ」というテキストが表示されます。
See the Pen css-selector-basis01 by kenichi (@ken81) on CodePen.
HTMLの簡単な説明
HTML
<div id="blue"> <p class="red">ここの色を変えていくよ</p> </div>
- div要素
- 特に意味を持たない要素です。
- p要素
- 文章の段落を表す要素になります。
classとidについて
要素の開始タグには、「class」や「id」といった属性を付けて自分で好きな名前を付けることができます。現時点では、名前を付けただけなので、特に意味はありません。この後、３つのセレクタを使って「ここの色を変えていくよ」というテキストの色を変えていきたいと思います。
色の指定方法
テキストの色を変えたいときは、プロパティに「color」を記入。
値には具体的な色の指定（ここでは、「red」または「blue」）を記入。
例えば、ある場所のテキストを赤にしたい場合は次のように書きます。
セレクタ{color:red;}
今回は、この「セレクタ」の部分の書き方が３パターンありますよ、というお話でしたね。
１．タイプセレクタを使った指定方法
タイプセレクタは、HTMLの要素（開始タグから終了タグまで）を指定する方法です。
例えば、p要素のテキストを赤くしたい場合は下記のように書きます。
p{color:red;}
これでp要素の中にあるテキストの色を「赤」として指定しましたので、これが、先ほどのソースコードに適用された場合、「ここの色を変えていくよ」という文字が赤くなります。
See the Pen css-selector-basis02 by kenichi (@ken81) on CodePen.
この方法で指定した場合、ページ内にあるp要素がすべて赤くなります。
２．classセレクタを使った指定方法
<div id="blue"> <p class="red">ここの色を変えていくよ</p> </div>
上記のp要素に付いているclass名「red」を利用してデザインを適用させるのがclassセレクタです。
書き方は、次のとおりです。
.red{color:red;}
HTMLにclassを付けるときは、「class=”red”」でしたが、スタイルシートでclassを指定するときはclass名の前にドット「.」を記入します。
See the Pen css-selector-basis03 by kenichi (@ken81) on CodePen.
これで、「red」というclass属性が付けられた部分がすべて赤になります。同じ要素がページ内に複数あり、その中の特定の要素のみにデザインを入れたい場合はこのclassセレクタを使います。
３．idセレクタを使った指定方法
３つ目の方法がidセレクタを使ったデザイン適用方法です。これはclassセレクタとほとんど同じです。
#blue{color:blue;}
先ほど、divタグに付けた「blue」というid属性を指定して色は青を指定してみました。これで、「blue」というid名が付けられた部分がすべて青くなります。
See the Pen css-selector-basis04 by kenichi (@ken81) on CodePen.
先ほど、classのときは前にドット「.」を入れるというお話をしましたが、idのときはシャープ「#」を入れます。
以上が３つのセレクタの書き方になります。ここの内容がなんとなく理解できたら次は、下記のページも見てみて下さい。
