CSSのセレクタについて学んでいきましょう。

セレクタとは？

セレクタとは、CSSで適用したい要素を選択するためのものになります。

CSSの書き方は下記の通りですが、下記の例だとpがセレクタです。

この書き方では、pタグの文字色を#f00(赤)に変えるという意味で、セレクタはpタグ全てが対象になります。つまり、pを使っているところ全て文字色が赤に変更されます。

セレクタの書き方は様々である程度覚える必要があります。

セレクタの種類

全称セレクタ

*(アスタリスク)を使います。これは全要素に適用されます。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

*{
 color：#f00；
}

要素セレクタ

タグ名をそのまま書きます。要素セレクタはタグ全てに適用されます。例ではpタグが書かれていますがこれをliに変更するとliタグすべてに適用されます。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

p{
 color：#f00；
}

idセレクタ

CSSを適用したいタグにidというものを付けます。そのidのみにCSSが適用されます。

idは開始タグの隙間に「id=”◯◯”」をいれると付けられます。◯◯は何を入れてもいいですが、わかりやすい名前にします。例えば文字色を赤にするCSSの場合はfont-redやcolor-redやredなどです。

注意点として、一つのページに同じid名の重複ができません。id名を変えれば何回でも使えます。

CSSの書き方は#とid名になります。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

#chikuwa{
 color：#f00；
}

classセレクタ

CSSを適用したいタグにclassというものを付けます。そのclassのみにCSSが適用されます。

classは開始タグの隙間に「class=”◯◯”」をいれると付けられます。◯◯は何を入れてもいいですが、わかりやすい名前にします。例えば文字色を赤にするCSSの場合はfont-redやcolor-redやredなどです。

classはidと違い、何度でも使えます。使い回ししたい時に便利です。

CSSの書き方は.(ドット)とclass名になります。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

.red{
 color：#f00；
}

idとclassはどっちを使えばいい？

使い方や機能が似ているidとclassですが、どちらを使っていいか迷いますよね。

大きな違いはidが同id名の使用禁止、classが何度でも使用できることです。

ですので、idを使う場面は1回しか使う必要のない時に使います。例えばheader、main、article、footerなど頻繁に使うものでないタグにidを使います。逆に何度も使う可能性があるものにはclassを使います。文字を太くするクラス、文字を中央に寄せるクラス、などです。

あとはCSSの優先度が関係してきます。例を見てみましょう。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

#red{
　　color:#f00;
}
.green{
　　color:#008000;
}

同じタグにidとclassが書かれています。idは文字色を赤に、classは文字色を緑にするCSSです。結果は赤になります。これは優先度の関係でidが適用されるからです。

子孫セレクタ

子孫が一致する場合に使えるセレクタです。

僕の大好物はちくわです。

　　
ちくわとちくわぶの違い
　　
ちくわのオススメ料理

.chikuwa li{
　　color:#f00;
}

この場合、「.chikuwa」の子要素であるliのみに適用されます。他のliには適用されません。classを書く量を減らすことができるので便利です。

他にもセレクタの指定方法あります

他にも孫はいれずに子要素のみ指定するセレクタ(◯◯ > ◯◯)、隣接するタグに指定するセレクタ(◯◯　+ ◯◯)などあります。

疑似クラス

疑似クラスは説明が難しいので例を見てみましょう。

:hover

マウスカーソルを合わせると色が変わるボタンを見たことがあると思います。マウスカーソルを合わせることをマウスホバー(マウスオーバー)と言います。

この変化を出すときに疑似クラスである:hoverを使います。書き方はセレクタの後ろに:hoverを付けるだけです。マウスカーソルを重ねてみてください。スマートフォンでは確認ができません。

ちくわ

.chikuwa{
background:#555;
padding:10px;
width:200px;
color:#fff;
text-align:center;
}
.chikuwa:hover{
　　background:#888;
}

:first-child

連続する子要素の最初にのみ適用されます。よくわからないと思うので例を見てみましょう。

おでんの具と言えば？

ちくわ
大根
はんぺん

.oden　li:first-child{
　　color:#f00;
}

逆に「:last-child」は最後の要素に適用されます。

おでんの具と言えば？

ちくわ
大根
はんぺん

.oden　li:last-child{
　　color:#f00;
}

疑似クラスは他にもたくさん

疑似クラスは他にもたくさんあります。調べてみるとたくさん出てくるので調べてみてください。

疑似要素

疑似クラス？疑似要素？何が何だかわからなくなりますよね。違いは疑似要素は要素の一部のみ変化を加えるもので疑似クラスは一部ではなく全体に変化を加えます。あとはコロン(:)の数も変わります。

やっぱりよくわからないですよね。例を見ていきましょう！

::before

beforeは要素の前に文字などをいれることができます。

おでんの具

.oden::before{
　　content:"ちくわ";
　　color:#f00;
}

::after

他にもこんな使い方があります。beforeの逆であるafterを使ってみます。

おでんの具

.oden::after{
　　content:"NEW";
　　color:#f00;
　　padding:5px;
　　border:1px solid #f00;
　　margin-left:5px;
}

疑似要素はほかにもたくさん

疑似要素は他にもたくさんあります。調べてみるとたくさん出てくるので調べてみてください。

試しに作ってみよう！

CSSを作る前に下記HTMLを作成しましょう。

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　

要素セレクタ

要素セレクタはタグを指定します。ただし、すべてのタグに適用されてしまうので扱いにくいです。

p{
　　　color:red;
}

結果

idセレクタ

HTML

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　

CSS

#heading{
　　　font-size:40px;
}

結果

idセレクタは下記のように同じ名前のものを同じページに使うことができません。

ダメな例のHTML

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　

classセレクタ

HTML

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　

CSS

.heading02{
　　　text-decoration:underline;
}

結果

classセレクタはidと違い同じclassを何度でも使うことができます。

子孫セレクタ

子孫セレクタは親と子の関係を利用して作っていきます。リストの点を消します。

HTML

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　

CSS

.list li{
　　　list-style:none;
}

結果

疑似クラス

マウスカーソルを重ねたとき(マウスホバー)のCSSを変更します。

HTML

　　　
　　　
　　　


　　　

　　　　　　
これから自己紹介をはじめます。
　　　　　　
自己紹介
　　　　　　
好きな食べ物
　　　　　　

　　　　　　　　　
ちくわ
　　　　　　　　　
ドーナツ
　　　　　　　　　
チョコレート
　　　　　　
　　　　　　
嫌いな食べ物
　　　　　　

　　　　　　　　　
きゅうり
　　　　　　　　　
レタス
　　　　　　　　　
トマト
　　　　　　
　　　　　　
これで自己紹介をおわります。
　　　　　　
次のページへ
　　　

CSS

.link a:hover{
　　　color:#f00;
}

結果

疑似要素

CSS

.heading::before{
　　　content:"■";
}

結果