パターンマッチング

ある条件に合致した要素に対してスタイルシートを適用することができる。これをセレクタと呼ぶ。その指定形式を次に示す。

pattern { attribute-list }
pattern

パターンマッチングを指定する。

attribute-list

属性のリストを指定する。属性のリストとは、ひとつの属性か、セミコロン記号で区切られた複数の属性である。

パターンをカンマで区切って複数指定することもできる。この場合、指定したパターンのいずれかにマッチすればスタイルシート属性が適用される。

pattern1, pattern2, pattern3 { attribute-list }

カンマが無く、空白で区切ってしまうと、子孫セレクタになってしまうので注意が必要である。

ユニバーサルセレクタ

すべての要素にマッチするパターン。

パターン 説明
* すべての要素にマッチする。

すべての要素タイプを対象とするセレクタを ユニバーサルセレクタ と呼ぶ。

なお、要素タイプに条件を加える場合には、* を省略できる。つまり、*.class.classと同等である。また、*#id#idと同等である。

タイプセレクタ

要素 E にマッチするセレクタ。

タイプセレクタ
Pattern Description
element 要素タイプ名(タグ名)がelementで指定した値に一致する要素
element1 , element2 要素タイプ名(タグ名)がelement1で指定した値又はelement2で指定した値に一致する要素

すべてのh2要素に対してスタイルを定義する例を示す。

h2 { font-size: xx-large }

h2要素、h3要素及びh4要素に対してスタイルを定義する例を次に示す。

h2, h3, h4 { color: red }

子孫セレクタ

パターン 説明
ancestor descendant 要素 ancestor の子孫である要素 descendant にマッチする。

span要素がdiv要素の子孫であれば赤く表示する例を次に示す。

<head>
  <style>
    div span { color: red; }
  </style>
</head>
<body>
  <div>
    <span>descendant1</span>
    <p>
      <span>descendant2</span>
    </p>
  </div>
  <p>
    <span>descendant3</span>
  </p>
</body>

上記の表示例を次に示す。

descendant1

descendant2

descendant3

子セレクタ

パターン 説明
parent > child 要素 parent の子供である要素 child にマッチする。

span要素がdiv要素の子供であれば赤く表示する例を次に示す。

<head>
  <style>
    div > span { color: red; }
  </style>
</head>
<body>
  <div>
    <span>child1</span>
    <p>
      <span>child2</span>
    </p>
  </div>
  <p>
    <span>child3</span>
  </p>
</body>

上記の表示例を次に示す。

child1

child2

child2

隣接兄弟セレクタ

E + F

要素 E の直後に要素 F が続き、親が共通の場合、要素 F にマッチする。要素 E と要素 F の間に別の要素が存在する場合はマッチしない。ただし、要素 E と要素 F の間には、タグ無しテキストやコメントがあっても構わない。

隣接兄弟セレクタを用いたスタイルシートの例を次に示す。

div + p { color:red; }

上記の隣接兄弟セレクタは、次に示すHTMLのp要素にマッチして、p要素が赤く表示される。

<div>兄</div>
<p>弟</p>

しかし、次に示すHTMLでは、div要素とp要素の間にblockquote要素があるのでマッチしない。

<div>兄</div>
<blockquote>次男</blockquote>
<p>三男</p>

次に示すHTMLでは、親が共通でない(兄弟ではなく親子)であるため、マッチしない。

<div>親
    <p>子</p>
</div>

属性セレクタ

パターン 説明
E[A] 要素 E の属性 A に値が設定されていれば、マッチする。属性 A の値は、どんな値でもよい。
E[A="V"] 属性 A の値が V である要素タイプ E にマッチする。
E[A~="V"] 要素 E の属性 A の値が、空白で区切られた複数の値のリストであり、そのいずれかの値が V であれば、マッチする。
E[lang|="V"] lang属性が V- で始まる値である要素タイプ E にマッチする。

E[A]

要素 E の属性 A に値が設定されていれば、マッチする。属性 A の値は、どんな値でもよい。

対応状況

Webブラウザ 対応状況
Internet Explorer 6
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

div要素のtitle属性に何らかの値が設定されていれば、テキストを赤色で表示する例を次に示す。

<head>
  <style>
    div[title] { color: red }
  </style>
</head>
<body>
  <div>sample</div>
  <div title="foo">sample</div>
  <div title="bar">sample</div>
</body>

上記の表示例を次に示す。

sample
sample
sample

E[A="V"]

要素 E の属性 A の値が V であれば、マッチする。

対応状況

Webブラウザ 対応状況
Internet Explorer 6
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

span要素のtitle属性の値がspan1であれば、テキストを赤色で表示するスタイルシートの例を示す。

<head>
  <style>
    span[title="span1"] { color: red; }
  </style>
</head>
<body>
  <p>
    <span title="span1">span1</span> <span title="span1 span2">span1-span2</span> <span title="span2">span2</span>
  </p>
</body>

title属性の値がspan1でないspan要素は、テキストが赤色で表示されない。

span1 span1-span2 span2

E [ A ~=" V "]

要素 E の属性 A の値が、空白で区切られた複数の値のリストであり、そのいずれかの値が V であれば、マッチするパターン。

<head>
  <style>
    span[title~="span3"] { color: red; }
  </style>
</head>
<body>
  <p>
    <span title="span3">span3</span> <span title="span3 span4">span3-span4</span> <span title="span5">span5</span>
  </p>
</body>

上記の表事例を次に示す。

span3 span3-span4 span5

E [lang|=" V "]

lang属性が V - で始まる値である要素タイプ E にマッチする。たとえば、パターン p[lang|="en"] は、lang属性の値が "en-US""en-UK" であるp要素タイプにマッチする。

p要素のlang属性が「en-」で始まる値であれば赤く表示する例を次に示す。

<head>
  <style>
    p[lang|="en"] { color: red }
  </style>
</head>
<body>
  <p lang="ja-JP">Japan</p>
  <p lang="en-UK">United Kingdom</p>
  <p lang="en-US">United States of America</p>
</body>

上記の表示例を次に示す。

Japan

United Kingdom

United States of America

クラスセレクタ

パターン 説明
*.class クラス名が class である要素にマッチする。
.class *.class と同じ。
E.class クラス名が class である要素 E にマッチする。

スタイルシートの定義に任意の名前を付けることができます。これをクラスと言います。クラスを定義する際は、クラスの定義であることを表すために必ずピリオド記号から始めます。

赤い大きな文字にするスタイル定義に notice というクラス名を付ける例を次に示します。

.notice { font-color: red; font-size: large }

この notice クラスを使用するには、HTML要素のclass属性にクラス名を指定します。

      <span class="notice">sample</span>
<p class="notice">sample</p>

特定の要素に対してクラスを定義することもできます。特定の要素に対してクラスを定義するには、「要素名.クラス名」の形式で定義します。

h2.notice { font-color: red; font-size: large }

h2要素に対して定義したクラスは、h2要素のclass属性から指定できます。他の要素のclass属性では指定できません。

<h2 class="notice">重要なお知らせ</h2>

ある特定のクラス内の要素に対してスタイルシートを指定するには、クラス名と要素タイプ名を半角スペースで区切ってスタイルシートを指定します。

例えば、 <div class="navi"></div> の間に存在するA要素タイプに対してスタイルシートを指定するには、次のようにします。

.navi a { color: red }

A要素タイプでも navi クラス内にあるか否かで上記スタイルシートが適用されるかどうかが決まります。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

擬似クラスセレクタ

擬似クラスセレクタは、特例の外的要因や状態を持つ要素に対してスタイルを適用する。

擬似クラスは次の順番で指定する必要がある。

  1. :link
  2. :visited
  3. :hover
  4. :active
パターン 説明
E:first-child 要素 E が、その親の最初の子供である場合にマッチする。
E:link もし E がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていなければ、要素 E にマッチする。
E:visited もし E がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れていれば、要素 E にマッチする。
E:hover 要素 E がホバーになった場合にマッチする。
E:active 要素 E がアクティブになった場合にマッチする。
E:focus 要素 E が、フォーカスを得た場合にマッチする。
E:lang(lang) 言語が lang である要素 E にマッチする。

E:first-child

要素 E が、その親の最初の子供である場合にマッチする。

対応状況

Webブラウザ 対応状況
Internet Explorer 6
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

p要素が、その親要素の最初の子要素である場合に適用するスタイルシートを指定する例を示す。

      p:first-child { color: red }
    

親要素divが2つの子要素(p要素)を持つHTMLの例を示す。

<div><p>最初の段落だけ赤くなります。</p><p>以降の段落は赤くなりません。</p></div>

最初の段落だけ赤くなります。

以降の段落は赤くなりません。

E:link

もし E がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていなければ、要素 E にマッチするパターン。

使用例と表示サンプル

a:link { color: gray }

E:visited

もし E がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れていれば、要素 E にマッチするパターン。

使用例と表示サンプル

a:visited { color: green }

システムエンジニアのスキルアップ

a:hover

a要素がホバー状態のときにマッチするパターン。アンカーをマウスでポイントしたときに適用するスタイルシートを指定する。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例

<a> </a> に囲まれた文字列(アンカー)の上にマウスカーソルを乗せたときにのみ適用するスタイルを指定できます。

定義済みクラス a:hover の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

a:hover { color: red; }
<a href="#a_hover">マウスのカーソルを乗せると赤くなります</a>

マウスのカーソルを乗せると赤くなります

a:active

a要素がアクティブ状態のときにマッチするパターン。アンカーをクリックしたときに適用するスタイルシートを指定する。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例

<a> </a> に囲まれた文字列(アンカー)をマウスでクリックされたとき、またはTABキーでフォーカスを移動したときにのみ適用するスタイルを指定できます。

定義済みクラス a:active の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

a:active { font-size: xx-large; }
<a href="#a_active">クリックすると大きくなります</a>

クリックすると大きくなります

E :focus

要素 E がフォーカスを得た場合にマッチするパターン。

偽要素

パターン 説明
E:first-line
E:first-letter

p:first-line

段落の最初の行がマッチする。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例

<p> </p> に囲まれた文字列のうち、最初の1行に対してだけ適用するスタイルを指定できます。

定義済みクラス p:first-line の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

p:first-line { color: red; }

<p>p:first-lineは段落の最初の行を表す定義済みクラスです。&lt;p&gt;と&lt;/p&gt;に囲まれた文字列のうち、最初の1行に対してだけ適用するスタイルを指定できます。この例では、最初の1行だけ赤く表示しています。</p>

p:first-lineは段落の最初の行を表す定義済みクラスです。<p>と</p>に囲まれた文字列のうち、最初の1行に対してだけ適用するスタイルを指定できます。この例では、最初の1行だけ赤く表示しています。

p:first-letter

段落の最初の文字を表す定義済みクラスです。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

<p> </p> に囲まれた文字列のうち、最初の文字に対してだけ適用するスタイルを指定できます。

定義済みクラス p:first-letter の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

p:first-letter { color: red; }
<p>最初の1文字だけ赤くなります。</p>

最初の1文字だけ赤くなります。

:before偽要素

書式

element [. class |# id ]:before { properties }

対応状況

Webブラウザ 対応状況
Internet Explorer 6
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

:before偽要素を用いて、blockquote要素の前に「引用始まり: 」という文字列を挿入するセレクタの例を示す。

blockquote:before { content: "引用始まり: " }
<blockquote>aaa</blockquote>
aaa

:after偽要素

書式

element [. class |# id ]:after { properties }

対応状況

Webブラウザ 対応状況
Internet Explorer 6
Internet Explorer 8
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

:after偽要素を用いて、blockquote要素の後に「 :引用終わり」という文字列を挿入するセレクタの例を示す。

<blockquote:after { content: " :引用終わり" }
<blockquote>aaa</blockquote>
aaa

IDセレクタ

パターン 説明
*#id IDが id である要素にマッチする。
#id *#idと同じ。
E#id IDが id である要素 E にマッチする。

スタイルシート定義にIDを付けることができます。IDを定義する際は、IDの定義であることを表すためにシャープ記号からはじめます。

#id001 { color: red }

IDを付けたスタイルを使用するには、HTML要素のid属性に指定します。クラスと異なり、ひとつのHTMLドキュメント中に複数の要素が同じIDを持つことはできません。

<span id="id001">sample</span>

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2
スポンサーリンク