ほんっとにはじめてのHTML5とCSS3：【65-3】クラスセレクター（.）と IDセレクター（#）

【65-3】クラスセレクター（.）と IDセレクター（#）

最終更新日：2023年04月18日　（初回投稿日：2023年04月18日）

クラスセレクターと IDセレクターは、両方とも Level 1 からの、すっごい古くからあるセレクターなんですが、仕様書 Selectors Level 3から、「属性」セレクターに分類されているんです。
たしかに、class属性や ID属性を使ったセレクターだもんね。

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

クラスセレクターと IDセレクターは、今まで何度もサンプルで登場したセレクターですが、改めて詳しく記事にしてみます。

本日のINDEX

参考：
・Selectors Level 3 | W3C Recommendation
・Selectors Level 4 | W3C Working Draft
・CSS セレクター | MDN

クラスセレクター（.）

まず、class属性について。
これは、主にCSSのために要素をクラス分け（グループ分け）するのに使います。
グローバル属性なので、すべての要素に使えます。

クラスセレクターは、要素に付けた class属性の値を、CSSで「.class属性値」というカタチでセレクターにします。
属性値のまえに「.（ピリオド）」を付けるだけという、あのおなじみのやつがクラスセレクターです。
例えば、<p class="demo"> とHTMLで指定したら、CSSで .demo というセレクターで指定します。

[class~="val"] を短縮形で表したのがクラスセレクター

クラスセレクターは、2コ前の記事でやった属性セレクター [att~="val"] と同じ効果を、短縮形で表せるというもの。（「=」の前に「~」が付いてるやつね）

[att~="val"] は「複数の属性値のリストの中にこの値がある」ならセレクターにするものでしたね。

クラス属性ってめっちゃ使うので、この短縮形が無いと作業が大変だったでしょうね。

例えば、[class~="demo"] だったら、これは *.demo ということ。

（先頭に「*（アスタリスク）=ユニバーサルセレクター」が付いていて、すべての要素が対象）

単に .demo と書くこともできるので、たいていこのアスタリスク省略形で書きます。

また、
p[class~="demo"] と、要素を特定したいなら、p.demo と書きます。
p[class~="sample"][class~="test"] なら、p.sample.test とつなげて書けばOK。

class属性の値（クラス名）で使える文字

使える文字は、半角英数字。記号は「-（ハイフン）」と「_（アンダーバー）」です。

アルファベットの大文字小文字は区別されます。
例えば <p class="demo"> とHTMLで指定しておいて、CSSで .Demo { ... } と呼び出してもブラウザは無視。何も起こりません。

また、クラス名は数字や記号で始まってはダメ。必ずアルファベットで始めます。
例えば、クラス名「_demo」「-demo」「1demo」とかは無効。ブラウザは何も反応しません。

クラスセレクターでの指定をいろいろ試してみた

ではクラスセレクターでいろいろ試してみよう。

HTMLでこのように指定。
<p> <span> <div> を使い、class属性値は test、demo、sample を単独だったり複数だったりで指定しています。

<div>
  <p class="sample">class属性値がtestな p要素<span class="demo">（の中にclass属性値が
  demoなspan要素）</span></p>
  <p class="test">class属性値がtestな p要素</p>
  <p class="sample test">class属性値がsampleとtestな p要素<span class="sample">（の中にclass属性値が
  sampleなspan要素）</span></p>
  <p class="demo sample test">class属性値がdemoとsampleとtestな p要素</p>
  <div class="demo sample">class属性値がdemoとsampleな div要素</div>
</div>

CSSはこのように指定。
2行目の「.test.sample」はクラス属性が「test かつ sample」な要素をセレクトします。

.test {color: green}
.test.sample {color: red}
.demo {color: blue}

プレビューです。

See the Pen クラスセレクターTEST by yuki★hata (@yuki__hata) on CodePen.

プレビューの4行目は、<p class="demo sample test"> という指定ですが、値「demo」が入っていても「sample test」があるので color: red に反応します。
.demo のほうがCSSでは後に書いているので、そっちが効きそうですが、それより、属性名が2つの .test.sample のほうが詳細度が高いためです。

セレクターの詳細度（優先度）に関しては、
【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）をご覧ください。

また、3行目の <span>要素には値「sample」がありますが、「.sample」というセレクターでのスタイルが指定されてないので、親要素（p class="sample test"）のスタイル（color: red）を継承しています。（colorプロパティは継承する仕様なので）

では CSSで、3行目をちょっと変えて、.demo だったのを div.demo にして要素を特定してみます。

.test {color: green}
.test.sample {color: red}
div.demo {color: blue}

プレビューです。

See the Pen クラスセレクターTEST2 by yuki★hata (@yuki__hata) on CodePen.

1行目にある <span>要素にも class="demo" があるんですが、div要素に特定したので反応しなくなりましたね。

こんどは CSSの 2行目に注目。
セレクターが「.test.sample」って2つくっつけてたのを、間に半角スペースを入れて「.test　.sample」と離してみました。

.test {color: green}
.test .sample {color: red}
div.demo {color: blue}

プレビューです。ずいぶん様子が変わりましたよ。

See the Pen クラスセレクターTEST3 by yuki★hata (@yuki__hata) on CodePen.

まず、「.test　.sample」と半角空けたことで、このセレクターは「子孫結合子」セレクターになり、「.test の子孫の .sample」というセレクターになったの。
ですので、その条件にあてはまる 3行目の <span>要素だけに「color: red」のスタイルが適用されました。
また、「.test.sample（testとsampleの値を両方持つ）」というセレクターが無くなったことで、3, 4行目は「.test」のセレクターに反応して文字色がグリーンになってます。

たった1つの小さな半角スペースを入れるか入れないかで、指定の意味がガラッと変わってしまうのがCSS。怖いですね〜ww

連結させたクラスセレクターの使い方

上のサンプルでは、適当に複数の class属性値を指定して実験していますが、もう少し実用性のあるサンプルを作ってみようと思います。

複数のクラス名は、「あるスタイルを指定したけど、それも生かしてちょっとだけスタイルを変えたい」ときに使うと便利です。

そのときに、「連結させたクラスセレクター」を使ったほうが、楽に指定できます。

下のサンプルは、本文の段落に使う <p>要素の使い分け。
普段の <p>要素より目立たせたいものに囲み罫や背景色を付けましたが、
「普段の <p>とちょっと変えたいけど、そんなに目立たせたくはない」ものがあった場合です。

See the Pen クラスセレクターの連結TEST by yuki★hata (@yuki__hata) on CodePen.

HTMLはこんなかんじで、
コラム的にしたい<p>要素には「class="column"」を、
最後の<p>要素には、さっきの「column」に加えて「c_small」という2つ目の値を追加。

<p>普段の本分用 <p>要素。<br>テキストテキストテキストテキスト</p>
<p class="column">強調したコラム的にしたい <p>要素。<br>テキストテキストテキストテキスト</p>
<p>普段の本分用 <p>要素。<br>テキストテキストテキストテキスト</p>
<p class="column c_small">コラム的な感じにしたいけど、<br>さほど重要じゃないから ちょっとおとなしめにしたい <p>要素。</p>

CSSですが、まずは下記のように「.column」と「.c_small」で指定してみます。

.column {
	border:dotted 1px #ccc;
	padding:1em 1em .7em;
	background:#ffffe0;
	}
.c_small {
	font-size:12px;
	padding:.5em .7em .3em;
	background:#efefef;
	}

HTMLで、最後の <p>要素に <p class="column c_small"> と2つの class属性値を指定しているので、両方の指定（囲み罫の指定と、文字サイズや背景色の指定）が適用できます。

ただこれ、ちょっと注意が必要。
書く順番で変わってしまうんです。
.c_small セレクターを、.column セレクターより先に書くと...

.c_small {
	font-size:12px;
	padding:.5em .7em .3em;
	background:#efefef;
	}
.column {
	border:dotted 1px #ccc;
	padding:1em 1em .7em;
	background:#ffffe0;
	}

プレビューはこちら。
最後の <p>要素の背景色がクリーム色になって、paddingも意図したものと違います。

See the Pen クラスセレクターの連結TEST2 by yuki★hata (@yuki__hata) on CodePen.

.columnセレクターと .c_smallセレクター両方に padding や background の指定があるので、詳細度が同じセレクターだと、後で書いたものが先のを上書きするんです。
なので「書く順番」が大事になってくる。

そこで使えるのが、連結したクラスセレクターです。
CSSで、目立たせたくない方のセレクターを「.column.c_small」に変えてみます。
class属性値が「.column. かつ c_small 」な要素という、より厳密な条件にしたので、書く順番を入れ変えても関係ありません。

.column.c_small {
	font-size:12px;
	padding:.5em 1em;
	background:#eee
	}
.column {
	border:dotted 1px #ccc;
	padding:1em;
	background:#ffffe0;
	}

プレビューです。
「.column.c_small」では指定していないはずの囲み罫（border:dotted 1px #ccc;）の指定もちゃんと効いていますね。

See the Pen クラスセレクターの連結TEST3 by yuki★hata (@yuki__hata) on CodePen.

以上、連結させたクラスセレクターの使い方でした。

まずフォーマットスタイルを決めて、それと少し変えたい時は新たに class名を付けて指定するという使い方が一般的だと思います。
レイアウト計画がきちんとしていても、あとでちょっとだけ変えたい場合はあるからね。

IDセレクター（#）

まずはid属性について。
これは、その要素をほかの要素と区別する（特定する）ために使います。
id属性はグローバル属性なので、すべての要素に付けられます。

CSSの IDセレクターは、要素に付けた ID属性の値を「#ID属性値」というカタチで使います。
属性値の前に「#（ハッシュ）」を付けるのが IDセレクター。
クラスセレクターの「.」が「#」に変わっただけでカンタンですね。

例えば、HTMLで <h2 id="title1"> などとID名を付けたら、CSSで #title1 というセレクターで呼び出します。

IDとは

ID（アイディー）とは、一般的には identification（アイデンティフィケイション）の略で「身元」「識別」や、「身分証」などの意味があります。
ネット上のサービスなどで、ログインIDとか言うアレ。ユーザーを特定するやつです。
他の人と同じIDなんて無いよね。唯一無二のものです。

ITでの IDは、identifier（アイデンティファイア）の略だそうで、意味は「識別子」。
ソフトウェアやハードウェア上のある特定の対象を他と識別するための「記号や番号」のことをいいます。

HTML文書上で使う id属性の値は、その要素をほかと区別する（特定する）ために使うので 1つのHTML文書上に 1コしか使えません。複数不可。
要素に id属性でつける値は、そのページ内で唯一無二の、たった1つの名前じゃなきゃだめ。

HTML文書でのIDは、CSSのセレクターに使う以外にも大事な役割があります。

【1】まず <a>要素などのリンクを指定する要素からのリンク先の役割。
（ページ内の特定の箇所にリンクするときのリンク先が ID名。2コあったら大変です）

例えば <h2 id="title1"> という要素なら、
ページ内リンクでは、<a href="#title1"></a> でリンク先に指定。
他のページからのリンクなら、<a href="このページのURL#title1"></a> でリンク先になります。

【2】JavaScript など他の言語からも ID名で呼び出したり操作したりできます。

JavaScriptで呼び出すなら document.getElementsById ("title1") で呼び出します。

で、せっかく特定の名前が付いてるので、IDセレクターを使ってスタイル指定もできる。
というかんじです。

ID属性の値（ID名）で使える文字

使える文字は、半角英数字。記号は「-（ハイフン）」と「_（アンダーバー）」と、ここまでは class属性と一緒ですが、これらに加えて「:（コロン）」「.（ピリオド）」も使うことができます。
ただし、「:」はCSSでプロパティと値を区切るのに使うし、「.」もクラスセレクターで使われるので、CSS編集時にややこしくなることを避けるために、「:」「.」は使わないことが多いように思います。使ってもいいんだけどさ。

アルファベットの大文字小文字は区別されます。クラス名と同じです。
例えば <h2 id="title1"> とHTMLで指定しておいて、CSSで #Title1{ ... } と呼び出してもブラウザは無視。何も起こりません。

また、クラス名と同じく数字や記号で始まってはダメ。必ずアルファベットで始めます。
例えば、ID名「_title」「-title」「1title」と書いても無効です。

また、同じHTML文書内で同じID名の要素があったら無効です。
リンクは反応しないし、スタイルも適用されません。
ページ内リンクがうまく行かない時は、ID名が重複している可能性大です。

IDセレクターでのCSSの指定

IDセレクターの使い方は超シンプル。
唯一無二なので、他の属性値で厳選することもなく、#で名指しするだけです。

例えばHTMLでこのようにID名を付けたら、

<div id="content">
  <!--内容-->
</div>

CSSでは下記のように呼び出します。

#content {
  border: 1px solid #CCC;
  padding: 0 2em;
  margin: 2em 0;
  }

上のコードで IDセレクターは「div#content」でもイイんですが、他の要素に同じ IDが付いてるはずがないんで、要素名は付けずに「#content」でOK。
ただし、編集の都合上、ID名が、何の要素に付けたものなのか書いておきたい場合には「div#content」としたほうが便利かも。

クラスセレクターと IDセレクターの使い分け

主にCSSのために 要素をクラス分け（グループ分け）するのがclass属性。
要素の特定 のために使うのが id属性です。

ページ内に1つしかないモノなら、そのまま IDセレクターでスタイル指定してもOK。
（タイトルの<h1>とか、<nav>要素とか、レイアウトのための<div>とか）

小見出しの<h3>とか、ページ内に何個もあるんだったら、別にクラス名もつけてクラスセレクターでスタイル指定する。（IDセレクターでのスタイル指定はやめる）
こんな使い分けがベストです。

例えばこの小見出し↓ですが、これは <h3>要素を使っています。

これはサンプルとしての小見出し（h3要素）

HTMLでは、スタイルのために class属性を、リンクのために ID属性を付けています。

<h3 class="title_h3" id="pt3-1">これはサンプルとしての小見出し（h3要素）</h3>

小見出しなので、同じページに何度も出てきます。
なので、もしも IDセレクターでスタイル指定したら、たぶん大変なことになります↓

#pt1-1,#pt1-2,#pt1-3,#pt1-4,#pt1-5,#pt1-6,#pt1-7,#pt1-8,#pt1-9,
#pt2-1,#pt2-2,#pt2-3,#pt2-4,#pt2-5,#pt2-6,#pt2-7,#pt2-8,#pt2-9,
#pt3-1,#pt3-2,#pt3-3,#pt3-4,#pt3-5,#pt3-6,#pt3-7,#pt3-8,#pt3-9,
#pt4-1,#pt4-2,#pt4-3,#pt4-4,#pt4-5,#pt4-6,#pt4-7,#pt4-8,#pt4-9, {
/*セレクターはこれでも足りないかもしれない。記事によって小見出しの数が違うので*/
  color: #fff;
  background:#7abd65;
  border-radius:1.4em;
  /*以下略*/
  }

というわけで、IDはリンク用と割り切って、クラスセレクターでCSSを指定したほうが圧倒的に時短です。

.title_h3 {
  color: #fff;
  background:#7abd65;
  border-radius:1.4em;
  /*以下略*/
  }

次回予告

今回で、基本的な CSSセレクターについては終わりです。
セレクターはこの他に、ここまでやった基本的なセレクターにくっつけて使う
・擬似クラス
・疑似要素
があるので、今後はこれらを使ってみましょう。

それを始める前に、次回は「ちょっとメモ」として「名前空間（ネームスペース）」と CSSのセレクターについてメモっておきます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2023-04-18（Tue）│
投稿日：2023-04-18（Tue）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿