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

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

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

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

セレクタの種類

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

要素セレクタ

まずは、一番単純なセレクタ。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</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</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つ)」

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

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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