(cache) ほんっとにはじめてのHTML5とCSS3：【3】id とか classって何？（セレクタの「種類」を知っておこう）

【3】id とか classって何？（セレクタの「種類」を知っておこう）

CSSのセレクタで、#○○○ や .□□□ というのをよく見かけますね。
これは、HTML要素の id属性の値、class属性の値を使って、要素を特定しています。

id と class はグローバル属性。HTMLのどの要素にも共通で使える属性です。

<div id="container">
<p class="columnGreen">
text text text
</p>
</div>

#container {margin:1em; padding:1em;}
.columnGreen {font-size:85%; color:green;}

CSSの指定では、
#（ハッシュマーク）は id名を指していて、これが付いたセレクタは idセレクタと呼ばれます。
.（ドット）はclass名を指し、これが付いたセレクタは classセレクタです。

id名、class名ともに、大文字と小文字の区別があります。

上のサンプルソースで、<p>要素の class名は「columnGreen」にしています。
これを CSSの指定で「columngreen」なんて「G」も小文字にすると無反応。ちゃんと大文字小文字まできちんと指定しよう。
しかしこの大文字を区別するのは便利。上の例のように大文字でセンテンスを区切って、自分が読みやすい名前にできます。

id名と class名の違いは、使える回数 です。

●「id属性」でつけた名前は、そのHTMLファイルの中で唯一無二の存在。
１つのHTMLファイルの中で１回のみ使用可。たった1つの要素を特定するためのものだから。
HTMLのページ内リンク（<a href="#id名">）でも id名を使いますね。
form関連の要素も、javaScriptでも id名を使って要素を特定します。
同じHTMLファイル内に同じ id名があったらエラーになるよ。
ページ内リンクはできませんし、javaScriptも動作しません。CSSの指定も無視。何も起こりません。

●id名と違って「class属性」でつけた名前は、HTMLファイル内で何度でも使えます。
いろんな要素に同じクラス名をつけて、同じグループにするために使います。

さて、この idセレクタ、classセレクタも含めて、
今回は、CSSの「セレクタの種類」を紹介します。
単純なセレクタから複雑な（詳しい）セレクタまで、いろいろあることを知っておいたほうが、「優先度のルール」を納得しやすいので。

本日のINDEX

セレクタの種類

セレクタの種類

セレクタにはいろんな種類があり、それぞれの特徴によって使い分ければ、すごく便利。
そして、セレクタの種類は CSSの優先順位に影響します。
どのセレクタがどのセレクタより強いか...は次回ご紹介しますが、その前にまずは「どんな種類があるか」を見てみましょう。

要素セレクタ

まずは、一番単純なセレクタ。HTML要素名をそのままセレクタにします。
要素セレクタを使うことで、HTMLファイル上にあるその要素全部に、同じスタイルを指定できます。

pre {
width: auto;
overflow: scroll; }

idセレクタ

冒頭でも紹介しましたが、HTML要素のid属性の名前をセレクタにします。
「#（ハッシュマーク）id名」で指定。
同じid名は１つのHTML上に１つしか使えません。
唯一無二のモノ（タイトルとか、メインボックス、サイドバーなど）に id名をつけて使います。
例えば、<h1 id="siteId"> なら、このh1要素は #siteId または h1#siteIdというセレクタで指定。

<h1 id="siteId">ほんっとにはじめてのHTML5</h1>

h1#siteId { font-size: 60px; }

classセレクタ

こちらも冒頭でも紹介しましたが、HTML要素のclass属性の名前をセレクタにします。
「.（ドット）class名」で指定。
class名は１つのHTML上にいくつでも使えます。
HTML上に何度も出てくる要素をクラス分けするのに使います。
例えば、<p class="small"> と <span class="small"> といったかんじで、異なる要素にも同じクラスにでき、両方ともセレクタは .small でスタイル指定できます。
要素を区別したい場合は、p.small や span.small というセレクタを使えばOKです。

.small { font-size: 85%; }
span.small { color: blue: }

/*この場合、class="small" とした要素はすべて文字サイズが85％で、
　その中の spanだけ、文字色がブルーになります*/

ちなみに、
HTMLで class属性は半角スペースで区切って複数指定できます。（idはムリよ。唯一無二だから）

<div id="sample" class="small colmun clearfix"> </div>

子孫セレクタ（複数指定して子孫を絞り込む）

複数のセレクタを半角スペースで区切って並べて指定します。
「○要素の中の、○要素の中の、○要素」といった具合で、子孫（子、孫、曾孫...）をより詳しく絞り込めます。

<div id="container">
  <header>
    <div id="description">HTML5とCSS3の編集ができるようになる！はず</div>
    <h1 id="siteId">ほんっとにはじめてのHTML5</h1>
  </header>

#container header h1#siteId { font-size: 60px; }

そして、例えば「div span」としただけで、親のdiv の子のspan だけでなく孫や曾孫...すべてのspanに同じスタイルを適用する特徴もあります。
子孫セレクタは「孫子（まごこ）の代まで祟（たた）ります」。これ大事。覚えておこう。

div#testOya {font-size:18px;}
div#testOya span {font-size:80%;}

<div id="testOya">
このテキストは18pxです。<br>
<span>ここは18pxの80％。<span>「ここは80％の80％」</span>ここは80％。</span>
<p>このテキストは18pxです。<span>ここ80％。</span></p>
</div>

このテキストは18pxです。
ここは18pxの80％。「ここは80％の80％」ここは80％。

このテキストは18pxです。ここは80％。

擬似クラス（Pseudo-classes）

疑似クラスは、要素の「状態」によってスタイルを与えることができます。
その要素が今どんな状態かによってクラス分けする的なかんじ。
セレクタ（要素、id、class）に「:（コロン）」をつけて、「○○:擬似クラス名」というカタチで使います。
例えば、<a>要素の状態（:link や :visited）、要素の中の要素を指定（:first-child や :last-child）、フォーム部品の要素の状態（:checked や :enabled）などでスタイルを決められます。
疑似クラスはセレクタ内のどこにあってもOK。

h4 a.test:hover span { color: pink; }

<h4><a href="#" class="test">擬似クラスのサンプルです<span>（ここだけhoverでピンクに）</span></a></h1>

PCの方はマウスオーバーしてください↓

擬似クラスのサンプルです（ここだけhoverでピンクに）

擬似クラスで便利なのは、E:nth-child(n) 。
Eは要素、nは数字などの値を入れて「n番目の要素」を特定します。

div p:nth-child(3) {color: red;}

nは数字以外の値もあって、臨機応変に使えます。
「odd」または「2n+1」で奇数番目の要素。
「even」または「2n」で偶数番目の要素。
ほかに、例えば「3n」だったら3の倍数（3、6、9、12、15...）番目の要素。
そして例えば「3n+1」だったら 1、4、7、10、13、16...番目の要素。
なんて具合です。便利ですね。

E:nth-child(n) の注意点は、他の要素もカウントすること。
例えば、この↓指定だったら、h2要素も含めてカウントして 3番目の p要素がターゲットです。
また、目指すターゲットが p要素じゃなかった場合、指定は無効になります。

<style>
div p:nth-child(3) {color: red;}  /*divの中の 3番目の要素 p がセレクタ*/
</style>

<div>
<h2> h2要素 </h2> <!--←p要素じゃなくてもカウントする-->
<p> p要素 </p>
<p> p要素 </p> <!--←このp要素の文字がredに。これがpじゃなければ何も起こらず-->
<p> p要素 </p> <!--←この子じゃない。3番目のp要素だけどw-->
</div>

擬似要素（Pseudo-elements）

擬似要素は、「要素の中」の最初の文字とか、最初の行などにスタイルを指定したり、存在しない文字や画像を追加してスタイルを与えることができます。
セレクタ（要素、id、class）に「::（コロン2つ）」をつけて、「○○::擬似要素名」というカタチで使います。

擬似要素は、CSS2で導入された頃は「:（コロン1つ）」でした。
CSS3からは、擬似クラスとはっきり見分けられるように「::（コロン2つ）」での記述が導入されたそうです。でも今のところ、ほとんどのブラウザで「:（コロン1つ）」でも使えます。
いずれは「::before」「::after」と書くようにしなければならないんでしょうね。
本記事では、コロン2つの記述で書いておきますね。

擬似要素は今のところこれくらいで、まだ少なめ（ホっ）。
::before（要素の前にテキストなどのコンテンツを作って、スタイルを適用）
::after（要素の後にテキストなどのコンテンツを作って、スタイルを適用）
::first-letter（要素内の最初の文字にスタイルを適用）
::first-line（要素内の最初の1行にスタイルを適用）
::marker（カウンタ使用時に ::before の代わりに）

★ ::marker はCSS3からなので必ず「::（コロン2つ）」
　 ::marker についてはコチラ→::marker | CSS-Tricks （まだ実装ブラウザは今の時点では無いようです）
　カウンタについてはコチラ→CSS カウンタの利用 - Web developer guide | MDN
★ ::selection というのもありましたが、これは仕様から削除されたそうです。

擬似要素はセレクタの最後につける決まりです。

ul li.new::after {
  content: " ★NEW★";
  color: red;
  font-size: 85%;}

<ul id="test2">
  <li class="new">擬似要素サンプルテキスト1</li>
  <li>擬似要素サンプルテキスト2</li>
  <li>擬似要素サンプルテキスト3</li>
</ul>

擬似要素サンプルテキスト1
擬似要素サンプルテキスト2
擬似要素サンプルテキスト3

ちなみに、擬似要素「::after」を使った例を2つばかり「＊Web Design 覚え書き＊」に書いてます。
ご興味ある方は、こちらも参考にしてください。
●「::after」を float解除の clearfix（クリアフィックス）に使う
●「::after」で「ふきだし」を作る（これはけっこうオモシロイです）

子セレクタと隣接セレクタ

子セレクタは「要素 > 要素」というカタチ。（半角スペースはあっても無くてもOK）
子供の要素だけを指定。
子孫セレクタ（「要素要素」ですべての子孫をターゲットにする）と違うのは「子だけ」なところ。

div#test3 > span { color :red; }

<div id="test3">
  子セレクタ サンプル<span>（コレは子どもなので、文字はred）</span>
  <p>ここはp要素の中<span>（コレは孫なので、文字色は変わらず）</span></p>
</div>

子セレクタサンプル（コレは子どもなので、文字はred）

ここはp要素の中（コレは孫なので、文字色は変わらず）

隣接セレクタは「要素 + 要素」というカタチで。（半角スペースはあっても無くてもOK）
ある要素の直後に現れる要素だけを指定します。子じゃなくて直後ね。

div#test4 {border:solid #ddd 1px; padding:1em;}
div#test4 p {margin:1em 0 0;}
div#test4 h4 {color:green; margin-bottom:0; border-bottom: solid 1px green;}
div#test4 h4+p {color:green; margin-top:0; font-size:85%;}

<div id="test4">
  <h4>隣接セレクタサンプル　小見出し（h4）</h4>
  <p>直後のp要素をサブタイトル風に使ってみた</p>
  <p>それ以外のp要素は普通に</p>
</div>

隣接セレクタサンプル　小見出し（h4）

直後のp要素をサブタイトル風に使ってみた

それ以外のp要素は普通に

属性セレクタ

HTML要素の「属性」がどうなっているかで要素を特定するセレクタ。
属性によって要素を区別できるので、レイアウトする上でとっても便利です。
いろいろ種類があるんですが、その中でもよく使う3つをピッックアップします。

要素[属性] というカタチ。ある属性を持っている要素だけをターゲットにします。
[] はセレクタ内にいくつでも指定できます。

h2[id][title] { color:red; }

要素[属性="値"] というカタチ。上のよりさらに詳しく絞り込めます。
ある属性のある値を持っている要素だけをターゲットにします。
[] はセレクタ内にいくつでも指定できます。

input[type="submit"][value="送信"] { color:#fff; background:green; }

要素[属性~="値"] というカタチ。「~」がついてます。
ある属性の値が1つ以上あるとき、ある値を持っている要素だけをターゲットにします。
[] はセレクタ内にいくつでも指定できます。

p[class~"small"][class~"sample"] { color:blue; }

<p class="column small sample clearfix">このテキストだけブルーに</p>
<p class="column clearfix">このテキストは適用外</p>
<p class="column">このテキストも適用外</p>

＊（全称セレクタ（ユニバーサルセレクタ））

最後に「*（アスタリスク）」だけのセレクタ。
これは、HTML上のすべての要素という意味のセレクタです。

* { margin:0; padding:0; }

昔はこのように↑ ブラウザのデフォルトスタイルをリセットするために「*」をよく使っていました。（いろんな参考書にも書いてあったりしました。シンプルでわかりやすいので流行ったんだよね）

上記のリセットだと何もかも全部の要素を「margin:0; padding:0;」にします。
しかし、リストの要素などで、デフォルトで十分なスタイルがあるし、ユーザにも負担をかける（レンダリングが遅い）。などの理由でこのリセット方法は今は使われていません。
必要なリセットだけするのが今の主流、というか実際に最適です。

というわけで、「 *（全称セレクタ（ユニバーサルセレクタ））」は、今後はあまり使う機会が無さそう。
こういうのもあると知っているだけでOK。古いサイトの指定を見て「 * が付いてるコレ何？」と思った時のために。

近いうちに「CSSリセット」についてまとめます。
Webサイトを作るとき、真っ先にやるのが、この CSSリセット なので。

別サイト「＊Web Design 覚え書き＊」で「CSSリセット」について書いていますので、ご興味ある方はご覧ください。
（若干書き方が乱暴というか、はじめての方には、わかりづらいかもしれませんが）
→ ブラウザのデフォルトスタイルを一旦リセットする [CSSリセット] | ＊Web Design 覚え書き＊

次回予告

さて、次回はやっと「CSSの優先度のルール」についてです。
【1】CSSってどんなもの？カスケーディングって何？で、
CSSの Cascading は、優先順位決定の仕組みだとわかりました。
この優先順位決定には、今回やった「セレクタ」も関わります。
（セレクタの「詳しさ」が優先度に関係あるんです）

CSSを使う上で、優先度のルールを理解しておくことは、とっても大切だと思う。
セレクタや、プロパティ & 値は、使っているうちにイヤでも覚えていくけど、
優先度のルールを知らないままだと、いつまで経ってもプレビューがウマくいかずにアレコレ悩むことに。（ちゃんと書けてるのに意図したとおりにプレビューしない時は、たいてい優先度が高い指定が邪魔してるんですよね♪）
明るい未来のために（笑）、優先度のルールをキチンと理解しよう。

関連記事