
お二人は、CSSのセレクタをマスターしていますか?



CSSセレクタって、なんだったっけ……



セレクタは要素を指定するときに使うんですよね。タグの名前をそのまま書けばいいと思っています
CSSのセレクタを使えば、装飾の対象になる要素を自由に指定することができます。タグを直接指定するだけでなく、要素の並び方によって適用するスタイルを変えることもできるんです。
このページではCSSのセレクタの使い方を解説していきます。すぐにわかるチートシートを用意したので活用してみてください。セレクタを使いこなせるようになればスタイル指定の幅が広がります。
CSSセレクタって何?






CSSセレクタについては前回「入門3:【CSSを初めて触る人へ】基本的な書き方やHTMLの基礎を学ぼう」でも簡単に触れているので、記憶が怪しかったら復習してみてください



復習してきました! セレクタとプロパティと値があった!



そうですね。あらためて、詳しくみていきましょう
CSSのセレクタは、HTML要素のどこにスタイルを適用するか選択するコマンドです。
CSSセレクタを使うことでHTMLの一部にだけスタイルを適用できます。
CSSセレクタを組み合わせれば、複雑な条件に一致した要素のみを対象にすることもできます。
CSSセレクタの種類と使い方






CSSのセレクタは、最初は少しわかりづらいかもしれません



装飾を指定するときの指定の仕方が、何種類かあるんでしたよね
CSSセレクタにはいくつかの種類があります。ここでは各セレクタの概要と使用例を紹介します。
要素名セレクタ
スタイル適用対象をHTMLタグの名前で指定します。対象となるHTMLタグすべてに同じスタイルが適用されます。
例1 p { font-size : 15px; } 例2 div { line-height : 120%; }



この場合、指定したHTMLタグ全てに対してスタイルが適用されます



Pタグとかを一括で指定したいときはこれですね



おおー 牛山くんが頼もしく見える
クラス名セレクタ
スタイル適用対象をクラスの名前で指定します。HTMLタグに設定した任意のクラス名が使えます。
クラス名セレクタを使うときはクラス名の前に半角ドットをつけます。例を見てみましょう。
HTMLタグ
<p>これは<span class="hutoi">サンプル</span>です。</p> <p class="hutoi">これはサンプルです。</p>
CSS例1
.hutoi { font-weight:bold; }
CSS例2
span.hutoi { font-weight:bold; }
HTMLタグに対してCSS例1を適用するとクラス名「hutoi」の要素が太字で表示されます。1行目は部分的に太字なり、2行目はまるごと太字になります。
CSS例2では、クラス名と要素名を同時に指定しています。2つを同時に指定するときは、要素名、クラス名の順番で記述し、半角のドットで繋いでください。spanタグであり、hutoiのクラス名を持つ要素にスタイルが適用されます。



この場合は、そのクラス名を持つ一部のHTMLのみにスタイルが適用されますよ



さっきとは逆に「ここだけ!」ってときに指定したい時に使うやつですね
ID名セレクタ
スタイル適用対象をIDの名前で指定します。クラス名セレクタのクラス名がID名に変わっただけです。
HTMLタグ
<p>これは<span id="sample">サンプル</span>です。</p>
CSS
#sample { font-weight:bold; }
ID名だけで指定するほか、要素名とID名の組み合わせでも指定できます。



クラスと基本的には考え方は同じですが、IDの場合は使い回しはできません



なんとっ!



IDは1つだけで、クラスは使い回しができるんですね
子孫セレクタ
子孫セレクタは、親子関係になっているHTMLタグの子要素に対してスタイルを適用します。具体例を紹介しましょう。
HTMLタグ
<div class="oya"> <p>クラス名「oya」の子供タグ</p> </div> <p>子供タグではない</p>
CSS
.oya p { font-weight:bold; }
上記サンプルの場合、クラス名「oya」を親に持つpタグだけにスタイルが適用されます。
子孫セレクタは親子関係が多層になっていても有効です。以下のように多層の構造を考えてみましょう。
HTMLタグ
<div class="dai"> <div class="chu"> <div class="sho"> <p>子供タグ</p> </div> </div> </div>
CSS例1
.dai .chu .sho p { font-weight:bold; }
CSS例2
.dai .sho p { font-weight:bold; }
CSS例3
.dai p { font-weight:bold; }
CSS例1では、dai・chu・shoを親に持つpタグのみが対象となります。
CSS例2では、dai・shoを親に持つpタグが対象です。CSSセレクタ側は必ずしも構造と同じ順番で記述する必要はなく、CSS例2のようにchuを省くこともできます。
CSS例3では、daiを親に持つpタグが対象です。



このように子孫セレクタを使うと、複雑な構造のHTMLにも対応できます



最初に頃はあまり使わなさそうだけど、いざっていうときは便利かもしれませんね
子セレクタ
子セレクタは、直属の子供要素にだけスタイルを適用します。記述するときは、親要素と子要素を半角の大なり記号で繋ぎます。親子関係を持つHTMLに子セレクタを使う具体例を紹介しましょう。
HTMLタグ
<div class="seibutu"> <div class="kaeru"> <p class="otama">おたまじゃくし</p> </div> <div class="niwatori"> <p class="hiyoko">ひよこ</p> </div> </div>
CSS例1
seibutu > kaeru { color : red; }
CSS例2
seibutu > otama { color : green; }
CSS例3
niwatori > p { color : blue; }
CSS例1ではseibutu直属の子供であるkaeruにスタイルが適用されます。
CSS例2ではスタイルが適用されません。otamaはseibutuの中に含まれますが、直属の子供ではないためです。上記のHTMLではotamaは孫になります。
CSS例3ではniwatoriの直属の子供であるpタグにだけスタイルが適用されます。



このように、子セレクタは直属の子供であるかがポイントになります。いっぽう、子孫セレクタは直属であるかを問いません。HTML構造によって子セレクタと子孫セレクタを使い分けます



なるほど。 ある一部分の範囲だけに適用できるんですね
隣接セレクタ
隣接セレクタは、隣接している直後の要素に対してスタイルを適用します。半角の+記号により要素名を繋いで記述する形です。隣接セレクタの使用タイミングを具体例で示しめすので、参考にしてください。
HTMLタグ
<img src="#" alt=""> <p>こんにちは、はじめまして。</p>
CSS
img p { margin-top : 15px; }
上記のように画像タグの直後に文章が続く場合は、通常よりも多くの余白を取りたかったり、逆に通常よりも余白を少なくしたいときがあります。そんな時に活躍するのが隣接セレクタです。



このように、画像直後のpタグにだけスタイルを適用できるので余白などを細かく調整できます。



ある特定の組み合わせの隣り合わせ同士で適用する場合はこちらですね
属性セレクタ
属性セレクタは、特定の属性を持つ要素に対してスタイルを適用します。属性セレクタの記述例を紹介しましょう。
HTMLタグ
<a href="#" title="link" class="zokusei" target="_blank">リンクボタン</a>
CSS例1
a[title] { font-size : 12px; }
CSS例2
a[class="zokusei"] { font-size : 14px; }
CSS例3
a { color : blue; } a[target="_blank"] { color : red; }
属性セレクタは大括弧の間に条件を記載します。CSS例1はtitle属性を持つaタグを対象とします。
CSS例2は、classの値が”zokusei“と一致する要素にスタイルを適用します。また、HTML要素によってはクラス名を半角スペースで区切って複数指定することもあるので覚えておいてください。そのようなときは、属性セレクタ条件式の=の前に半角チルダをつけて~=と記述します。~=なら複数クラスの中のどれか1つに一致すればスタイルが適用されます。
CSS例3は実用的な例です。targetがblankであるaタグ、すなわち外部リンクのみにスタイルを適用します。上記例では通常リンクを青色で、外部リンクを赤色で表示しています。



属性セレクタは、HTMLのある属性に対してのみ適用したいときに使うと便利ですよ



外部ウィンドウが開くリンク(target=”_blank”)だけに適用したいスタイルがあるときとか、ですね



(牛山くんが明らかに成長している…… これはやばい)
疑似クラス・疑似要素
最後に擬似クラスを解説します。擬似クラスは要素の状態を判断したり、HTMLとしては存在しない要素を生成するときに使います。
ここではわかりやすくするために、すべてaタグに対しての記述例を紹介します。
疑似クラスはaタグ以外に使うこともできます。
a:link{color:red;}
未訪問のリンクに対してスタイルを適用します。
a:visited{color:red;}
既に訪問済みのリンクに対してスタイルを適用します。
a:hover{color:red;}
マウスカーソルを乗せている間だけスタイルが適用されます。
a:active{color:red;}
クリックしている最中だけスタイルが適用されます。
a:focus{color:red;}
フォーカスしている間だけスタイルが適用されます。テキスト入力ボックスの入力中だけ色を変えたいときなどに使います。
a:lang(en){color:red}
HTMLタグにlangによる言語指定があるときに使用します。特定言語に対してスタイルを適用します。
.test a:first-child{color:red;}
クラス名「test」の要素内に登場する最初の子要素がaタグだった場合にスタイルを適用します。
.test a:first-of-type{color:red;}
クラス名「test」の要素内に登場する最初のaタグにスタイルを適用します。
a:last-child{color:red;}
クラス名「test」の要素内に登場する最後の子要素がaタグだった場合にスタイルを適用します。
.test a:last-of-type{color:red;}
クラス名「test」の要素内に登場する最後のaタグにスタイルを適用します。
.test a:nth-child(n){color:red;}
クラス名「test」の要素内に登場するn番目の子要素がaタグだった場合にスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。
.test a:nth-of-type(n){color:red;}
クラス名「test」の要素内に登場するn番目のaタグにスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。
p:first-line{color:red;}
指定要素の最初の1行目だけにスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。pタグ内の文章をbrタグで改行している場合、1行目だけが赤い文字で表示されます。
p:first-letter{font-size:32px;}
指定要素の最初の1文字目にスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。最初の文字だけを大きく表示するデザインに使えます。
a:before{content:”★”;}
指定要素の直前に新しい要素を追加します。この例であればaタグの先頭に★マークが表示されます。
a:after{content:”(リンク)”;}
指定要素の直後に新しい要素を追加します。この例であればaタグの末尾に(リンク)という文字が表示されます。



疑似クラスや疑似要素に関してはそこまで頻繁に出てくるわけではないのですが、リンク色やリスト(箇条書き)などをコントロールしたい場合などにそこそこ使うので覚えておいてくださいね



厳しいよー



でも、いずれはこのセレクタを使うときが来そうなので、僕は覚えますよー



仕方ない。 では、わたしも覚えるとしよう
CSSセレクタのチートシート






では次にCSSセレクタのチートシートを解説していきます。



チートシート! よっ、待ってました!



よく使うセレクタのカンペみたいなものですよね



そうですね。よく使われるCSSセレクタとデザインの組み合わせを目的別にまとめているので実際にホームページを作るときに役立つはずです
リンクにデザインを適用する
HTMLタグ
<div><a href="#">もっと詳しく見る</a></div> <div><a href="#" target="_blank">公式サイトをチェックする</a></div>
CSS
a { text-decoration:none; }//リンク文字の下線を消す a:link { color: blue; }//未訪問のリンク色を青色 a:visited { color: gray; }//訪問済みのリンク色を灰色 a[target="_blank"]:after { content:"(別サイト)"; }//外部リンクの末尾に(別サイト)と表示 a:hover { text-decoration:underline; }//カーソルを乗せたときのみリンク下線を表示 a:active { color : orange; }//リンクのクリック時のみ色をオレンジ
テーブルにデザインを適用する
HTMLタグ
<table> <tr><th>商品1</th><th>商品2</th></tr> <tr><td>300円</td><td>400円</td></tr> <tr><td>5個</td><td>8個</td></tr> </table>
CSS
table tr:nth-child(1){ background-color:gray; }//見出し行を灰色 table tr:nth-child(2){ color:red; }//価格の行を赤文字
入力フォームのセレクタ一覧
・テキストボックス→input[type="text"] { } ・テキストエリア→textarea { } ・チェックボックス→input[type="checkbox"] { } ・チェックボックス選択時→input[type="checkbox"]:checked { } ・ラジオボタン→input[type="radio"] { } ・ラジオボタン選択時→input[type="radio"]:checked { } ・セレクトボックス→select { } ・送信ボタン→input[type="submit"] { }



はい。ここまでがチートシートです



よっしゃー! これをチラチラ見れば、覚えなくても大丈夫だぞ



そうですね。最初はその方法でも大丈夫ですよ



一気に気持ちが楽になりました
CSSセレクタの基礎まとめ






はい。というわけで、今回はCSSのセレクタの種類とそれぞれの使い方を学びましたね。どうでしたか?



どうもこうも、牛山くんの成長ぶりに驚いています。 抜け駆けしようとしていて、ひどいなと思いました



そうですね。牛山くんは頑張っているのが、私にも伝わりましたよ



むぅ……



実はちょっと復習したんですよ
CSSセレクタをマスターすると、複雑なHTMLにもデザインを適用できるようになります。
また、効率よくセレクタを指定することでコーディング時間の短縮にも繋がります。ここで紹介したセレクタはよく使うものばかりなので、ぜひ覚えてみてください。
コメント