セレクタ

 
  
ホーム > CSS2 Note > CSS2の概要 > セレクタ

基本書式

セレクタは、基本的に次のような書式で記述します。
セレクタ { プロパティ:値 }    /* (C1- ie3- N4-) */
 

グループ化

以下のように複数のセレクタをコンマ[,]で区切って指定することによって、複数のセレクタに対して一度に同じスタイルを設定することができます。
セレクタ, セレクタ, セレクタ { プロパティ:値 }    /* (C1- ie3- N4-) */
 

よく使うセレクタ

h1       {...}    /* (C1- ie3- N4-) 要素 */
.myclass {...}    /* (C1- ie3- N4-) クラス (HTML、XHTMLのみ) */
#myid    {...}    /* (C1- ie3- N4-) ID */
p.myclass {...}   /* (C1- ie3- N4-) p要素のクラス (HTML、XHTMLのみ) */
p#myid    {...}   /* (C1- ie3- N4-) p要素のID */
A B {...}         /* (C1- ie3- N4-) 子孫セレクタ */

結合子[ ][>][+]を持たない単純セレクタ「A」を祖先要素とする、単純セレクタ「B」。
a:link    {...}   /* (C1- ie3- N4-) リンク */
a:visited {...}   /* (C1- ie3- N4-) 訪問済みリンク */
a:hover   {...}   /* (C2- ie4- N6-) ポイント時のリンク */
a:active  {...}   /* (C1- ie4- N6-) アクティブなリンク */
 

セレクタ

セレクタには、以下の項目に示すような指定方法があります。基本的なセレクタ(要素名またはアスタリスク[*])に続けて、IDセレクタやクラスセレクタ、属性セレクタや疑似クラスなどを任意の順序で組み合わせて指定することができます。ただし、疑似要素については、必ずセレクタの最後に記述しなければなりません。

セレクタ内に記述する要素名および属性名について大文字と小文字の区別を行うかどうかは、構造化言語によって異なります。たとえば、HTMLでは要素名および属性名の大文字と小文字は区別されませんが、XHTML、XMLでは区別されます。
 

汎用セレクタ

汎用セレクタ(universal selector)はアスタリスク[*]で指定され、すべての要素とマッチします。汎用セレクタが構成上特別な意味を持たない場合には、アスタリスクを省略することができます。
*.myclass {...}    /* (C2- ie5- N6-) */    →    .myclass {...}    /* (C1- ie3- N4-) */
*#myid    {...}    /* (C2- ie5- N6-) */    →    #myid    {...}    /* (C1- ie3- N4-) */
 

タイプセレクタ、クラスセレクタ、IDセレクタ

タイプセレクタは、指定された要素名とマッチします。クラスセレクタは、HTML、XHTMLのスタイルシートで指定されたクラスとマッチします。IDセレクタは、指定されたIDとマッチします。
要素        {...}   /* (C1- ie3- N4-) タイプセレクタ */
要素.クラス {...}   /* (C1- ie3- N4-) クラスセレクタ(HTML、XHTMLのみ) */
要素#ID     {...}   /* (C1- ie3- N4-) IDセレクタ */
IDセレクタはクラスセレクタより優先され、クラスセレクタはタイプセレクタより優先されます。
CSS1では1つのセレクタに指定できるクラスは1つでしたが、CSS2では1つのセレクタに複数のクラスを指定できるようになりました(一般的にはマルチプルクラス[Multiple classes]と呼ばれています)。
要素.クラス.クラス.クラス {...}   /* (C2- ie5- N6-) マルチプルクラス(Multiple classes) (HTML、XHTMLのみ) */

p.uno.due.tre.quattro.cinque.sei.sette.otto.nove.dieci {...}   /* C2- ie5- N6- (HTML、XHTMLのみ) */
ie5- N6- でサポートされていますが、IEでは(IE7でも)どれかひとつでもクラスが含まれているとスタイルが適用されてしまう場合があるので注意が必要です。Mozzilla、Firefox、Netscape、Operaでは問題なく動作します。
 

子孫セレクタ、子供セレクタ、隣接セレクタ

A B {...}   /* (C1- ie3- N4-) 子孫セレクタ */
A>B {...}   /* (C2- N6-) 子供セレクタ */
A+B {...}   /* (C2- N6-) 隣接セレクタ */

子孫セレクタ「A B」は、単純セレクタ「A」を祖先要素とする単純セレクタ「B」にマッチします。
<要素A>
  <要素B>
    <要素B>こんにちは</要素B>    /* 祖先要素A内のすべての要素Bが子孫 */
  </要素B>
</要素A>

子供セレクタ「A>B」は、単純セレクタ「A」を親要素とする単純セレクタ「B」にマッチします。
<要素A>
  <要素B>こんにちは</要素B>    /* 親要素A内に一階層だけネストする要素Bが子供 */
  <要素B>こんにちは</要素B>
</要素A>

隣接セレクタ「A+B」は、単純セレクタ「A」と単純セレクタ「B」の親要素が同じで、「A」の直後に続く「B」にマッチします。
<要素>
  <要素A>こんにちは</要素A>
  <要素B>こんにちは</要素B>    /* 親要素が同じで、要素Aの直後に続く要素Bが隣接 */
</要素>

単純セレクタとは、結合子[ ][>][+]のないセレクタを表します。単純セレクタと結合子[ ][>][+]の間には、自由に空白文字を記述することができます。

子孫セレクタと子供セレクタを組み合わせたりなどして、より複雑なセレクタを構成することもできます。
div ol>li p {...}   /* div要素の子孫であるol要素、その子供であるli要素の子孫であるp要素にマッチ */
 

:first-child疑似クラス

:first-child疑似クラスは、ある別の要素の最初の子供要素にマッチします。
要素:first-child {...}    /* (C2- N6-) */
div > p:first-child {...}

というスタイルシートの記述は、

<div>
<p>こんにちは こんにちは こんにちは こんにちは
</div>

のp要素にマッチしますが、

<div>
<h1>あいさつ</h1>
<p>こんにちは こんにちは こんにちは こんにちは
</div>

のp要素にはマッチしません。
疑似クラスの名称は大文字小文字を区別しません。
 

リンクに関する疑似クラス

要素:link    {...}   /* (C1- ie3- N4-) リンク */
要素:visited {...}   /* (C1- ie3- N4-) 訪問済みリンク */
要素:hover   {...}   /* (C2- ie4- N6-) ポイント時の要素 */
要素:active  {...}   /* (C1- ie4- N6-) アクティブな要素 */
要素:focus   {...}   /* (C2- N6-) 選択時の要素 */
疑似クラスの名称は大文字小文字を区別しません。

HTMLにおいては、リンクに関する疑似クラスはhref属性を持つa要素のみに当てはまります。したがって以下のように省略することもできます。
:link    {...}   /* (C1- ie3- N4-) リンク */
:visited {...}   /* (C1- ie3- N4-) 訪問済みリンク */
:hover   {...}   /* (C2- ie4- N6-) ポイント時の要素 */
:active  {...}   /* (C1- ie4- N6-) アクティブな要素 */
:focus   {...}   /* (C2- N6-) 選択時の要素 */

リンクのスタイルを指定するセレクタの例


リンクのスタイルを指定する際によく利用されるセレクタの例を紹介します。リンクに使用する擬似クラスには決められた順序があります。link、visited、hover、acriveの順です。
ページ全体のリンクを設定
a:link    {...}   /* リンク */
a:visited {...}   /* 訪問済みリンク */
a:hover   {...}   /* ポイント時のリンク */
a:active  {...}   /* アクティブなリンク */

特定クラスが指定されているリンクの設定
a.クラス:link    {...}
a.クラス:visited {...}
a.クラス:hover   {...}
a.クラス:active  {...}

特定クラスが指定された要素に含まれるリンクの設定
.クラス a:link    {...}
.クラス a:visited {...}
.クラス a:hover   {...}
.クラス a:active  {...}

マウスが乗ったら下線と背景を表示
a:link    {color:#0000ff; text-decoration:none}
a:visited {color:#0000ff; text-decoration:none}
a:hover   {color:#006699; text-decoration:underline; background:#ddeeff}
a:active  {color:#006699; text-decoration:underline; background:#ddeeff}
 

言語に関する疑似クラス

:lang(ja)という疑似クラスは言語コードがjaである要素にマッチします。
要素:lang(ja) {...}    /* (C2-) */
疑似クラスの名称は大文字小文字を区別しません。
言語コードは大文字小文字を区別しません。

参考資料: [ISO 639-2] http://www.loc.gov/standards/iso639-2/englangn.html
 

属性セレクタ

要素[属性] {...}    /* (C2- N6-) */
指定された属性を持つ要素にマッチします。

要素[属性="属性値"] {...}    /* (C2- N6-) */
指定された属性、値を持つ要素にマッチします。

要素[属性~="属性値"] {...}    /* (C2- N6-) */
指定された属性の値がスペース[ ]で区切られた単語のリストであり、そのリスト内に指定された値を含んでいる要素にマッチします。

HTML、XHTMLのスタイルシートでclass属性へのマッチングを行う場合、[~=]という表記法の代わりにピリオド[.]を使用することができます。したがってHTML、XHTMLでは、「属性.クラス」と「属性[class~=クラス]」は同じ意味を持ちます。属性値としてのクラスはドット[.]の直後に記述しなければなりません。
要素[属性~="属性値"] {...}    /* (C2- N6-) */
要素.クラス {...}             /* (C1- ie3- N4-) (HTML、XHTMLのみ) */
.クラス {...}                 /* (C1- ie3- N4-) (HTML、XHTMLのみ) */

要素[属性|="属性値"] {...}    /* (C2-) */
指定された属性の値がハイフン[-]で区切られた単語のリストであり(ハイフンはなくてもよい)、そのリストの先頭単語が指定された値と同じである要素にマッチします。この要素は主に言語コードにおけるサブコード(en, en-US, en-cockney)に対して使用されます。

div[lang|="en"] {color:red}  /* lang属性に[en]で始まる値[en][en-US][en-cockney]などを持つdiv要素にマッチ */

言語コードは大文字小文字を区別しません。

参考資料: [ISO 639-2] http://www.loc.gov/standards/iso639-2/englangn.html
 

疑似要素

要素:first-line {...}    /* (C1- ie55- N6-) */
ブロック要素の1行目として表示される部分にスタイルを適用します。

要素:first-letter {...}    /* (C1- ie55- N6-) */
ブロック要素の最初の1文字に対してスタイルを適用します。

要素:before {...}    /* (C2- ie8- N6-) */
contentプロパティと共に使用して、要素の直前に追加される内容に対してスタイルを適用します。

要素:after {...}    /* (C2- ie8- N6-) */
contentプロパティと共に使用して、要素の直後に追加される内容に対してスタイルを適用します。

疑似要素を用いる際は、必ずセレクタの最後に記述しなければなりません。
 
 

クラスセレクタやIDセレクタに関する注意事項



CSSでは、クラスセレクタIDセレクタが非常に大きな力を持っています。したがって文書作成者は、体裁にほとんどなんら関係のない要素、たとえば、HTMLにおいては、div要素span要素などをベースとして、それらにclass属性やid属性などでスタイル情報を与えれば、独自の構造化言語を設計することができるものと考えられます。

しかし、文書の構造要素は世間一般に広く受け入れられている一般的な意味合いを持ちます。文書作成者は独自の構造化言語の使用を避けなければなりません。文書作成者が定めた構造化言語では、さまざまな場面で、たとえばサーチエンジンや音声ブラウザなどにおいて、全く意味を理解してもらえない可能性があります。
 
関連項目:
トップページ CSS2 Note ページトップ
 2005/09/21発行 2009/09/01更新