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

最終更新日:2017年11月13日  (初回投稿日:2015年08月03日)

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

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

HTML上で、このように id属性や class属性を使って要素に名前を付けます。

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

CSSの指定では、
#(ハッシュマーク)は id名を指していて、これが付いたセレクタは idセレクタと呼ばれます。
.(ドット)はclass名を指し、これが付いたセレクタは classセレクタです。
このように「#」や「.」で名前を付けた要素を特定してスタイルを指定します。

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

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

上のサンプルソースで、<p>要素の class名は「columnGreen」にしていますが、これを CSSの指定で「columngreen」と全部小文字にすると無反応です。

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

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

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

セレクタの種類

さて、この idセレクタclassセレクタも含めて、
今回は、CSSの「セレクタの種類」をざっと紹介します。
セレクタの書き方がいろいろあることを知っておいたほうが「優先度のルール」を理解しやすいので。

  1. 要素セレクタ
  2. idセレクタ
  3. classセレクタ
  4. 子孫セレクタ(複数指定して子孫を絞り込む)
  5. 擬似クラス(Pseudo-classes)
  6. 擬似要素(Pseudo-elements)
  7. 子セレクタと隣接セレクタ
  8. 属性セレクタ
  9. *(全称セレクタ(ユニバーサルセレクタ))

要素セレクタ

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

pre {
width: auto;
overflow: scroll; }

idセレクタ

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

<h1 id="siteId">ほんっとにはじめてのHTML5とCSS3</h1>
h1#siteId { font-size: 60px;} 

classセレクタ

こちらも冒頭でも紹介しましたが、HTML要素のclass属性の名前をセレクタにします。
「.(ドット)class名」で指定。
class名は1つのHTML上にいくつでも使えます。
HTML上に何度も出てくる要素をクラス分けするのに使います。
例えば、<p class="small"><span class="small"> といったかんじで、異なる要素にも同じクラスにでき、両方ともセレクタは .small で指定できます。
要素を区別したい場合は、p.smallspan.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とCSS3</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%;}

上の CSSで、下記の HTMLだと、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

a.test:hover span {color: pink;}
<div><a href="#" class="test">擬似クラスのサンプルです<span>(ここだけhoverでピンクに)</span></a></div>

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

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

下の例は、div要素の中の3番目のp要素の文字を赤にしています。

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要素だけど-->
</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つ)」

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

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

擬似要素「::before」「::after」は、指定した要素の内側インライン要素としてコンテンツを生成します。

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

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

div#test3 > span {color :red}
<div id="test3">
  子セレクタ サンプル<span>(コレは子どもなので、文字はred)</span>
  <div>ここはdiv要素の中<span>(コレは孫なので、文字色は変わらず)</span></div>
</div>
子セレクタ サンプル(コレは子どもなので、文字はred)
ここはdiv要素の中(コレは孫なので、文字色は変わらず)

隣接セレクタ「要素 + 要素」というカタチで。(半角スペースはあっても無くても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つ以上あるとき、ある値を持っている要素だけをターゲットにします。
[] はセレクタ内にいくつでも指定できます。

下の CSSは、class属性に複数値を持っているp要素のうち、値がsmallとsampleのモノだけをターゲットにしています。

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

このときのHTMLソースはこんなかんじ。

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

*(全称セレクタ(ユニバーサルセレクタ))

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

* {margin:0; padding:0;}

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

上の指定では何もかも全部の要素を「マージン0、パディング0」にします。
しかし、デフォルトスタイルで十分な要素もあり、その後のスタイル指定がかえって大変、などの理由で、今はこのリセット方法は使われません。
こういうのもあると知っているだけでOK。

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

次回予告

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

CSSを使う上で、優先度のルールを理解しておくことは、とても大切です。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.