CSS1、CSS2.1、CSS3 で定義されているセレクタの使用方法の一覧を示します。
| パターン | 説明 | 版数 | 種別 |
|---|---|---|---|
| * { ... } | すべての要素 | CSS2 | 汎用セレクタ |
| E { ... } | すべての E要素 | CSS1 | タイプセレクタ |
| ns|F { ... } | 名前空間nsの中の要素E | CSS3 | タイプセレクタ |
| E.class { ... } | class属性の値が xyz であるすべての E要素 | CSS1 | クラスセレクタ |
| E#id { ... } | id属性の値が xyz である E要素 | CSS1 | IDセレクタ |
| E, F { ... } | すべての E要素や F要素 | CSS1 | グルーピング |
| E F { ... } | E要素の子孫として出現する F要素 | CSS1 | 結合子 |
| E > F { ... } | E要素の子として出現する F要素 | CSS2 | 結合子 |
| E + F { ... } | 要素Eの直後に登場する兄弟要素F | CSS2 | 結合子 |
| E ~ F { ... } | 要素Eよりも後ろに登場する兄弟要素F | CSS3 | 結合子 |
| E[attr] { ... } | attr属性を持つすべてのE要素 | CSS2 | 属性セレクタ |
| E[ns|attr] { ... } | 名前空間ns中のattr属性を持つすべてのE要素 | CSS3 | 属性セレクタ |
| E[attr="val"] { ... } | attr属性の値が val であるすべてのE要素 | CSS2 | 属性セレクタ |
| E[attr~="val"] { ... } | attr属性の値のひとつが val であるすべてのE要素 | CSS2 | 属性セレクタ |
| E[attr|="val"] { ... } | attr属性の値が val もしくは val- で始まるすべてのE要素 | CSS2 | 属性セレクタ |
| E[attr^="val"] { ... } | attr属性の値が val で始まるすべてのE要素 | CSS3 | 属性セレクタ |
| E[attr$="val"] { ... } | attr属性の値が val で終わるすべてのE要素 | CSS3 | 属性セレクタ |
| E[attr*="val"] { ... } | attr属性の値が val を含むすべてのE要素 | CSS3 | 属性セレクタ |
| E:link { ... } | 未訪問のリンク | CSS1 | ダイナミック疑似クラス |
| E:visited { ... } | 訪問済みのリンク | CSS1 | ダイナミック疑似クラス |
| E:active { ... } | マウスでクリック中など、アクティブな要素 | CSS1 | ダイナミック疑似クラス |
| E:hover { ... } | マウスが乗せられている要素 | CSS2 | ダイナミック疑似クラス |
| E:focus { ... } | フォーカスがあてられている要素 | CSS2 | ダイナミック疑似クラス |
| E:root { ... } | 文書のルート要素。HTMLの場合は常に html要素 | CSS3 | 構造的疑似クラス |
| E:first-child { ... } | 親要素から見て最初の子要素 | CSS2 | 構造的疑似クラス |
| E:last-child { ... } | 親要素から見て最後の子要素 | CSS3 | 構造的疑似クラス |
| E:first-of-type { ... } | 親要素から見て最初の E要素 | CSS3 | 構造的疑似クラス |
| E:last-of-type { ... } | 親要素から見て最後の E要素 | CSS3 | 構造的疑似クラス |
| E:nth-child(n) { ... } | 親要素から見て前から n番目の子要素 | CSS3 | 構造的疑似クラス |
| E:nth-last-child(n) { ... } | 親要素から見て後から n番目の子要素 | CSS3 | 構造的疑似クラス |
| E:nth-of-type(n) { ... } | 親要素から見て前から n番目の E要素 | CSS3 | 構造的疑似クラス |
| E:nth-last-of-child(n) { ... } | 親要素から見て後から n番目の E要素 | CSS3 | 構造的疑似クラス |
| E:only-child { ... } | 親要素から見て唯一の子要素である場合の要素 | CSS3 | 構造的疑似クラス |
| E:only-of-type { ... } | 親要素から見て唯一の E要素である場合の要素 | CSS3 | 構造的疑似クラス |
| E:empty { ... } | 子要素を持っていない E要素 | CSS3 | 構造的疑似クラス |
| E:target { ... } | クリックされたリンクの対象要素 | CSS3 | ターゲット疑似クラス |
| E:lang(c) { ... } | 言語cで記述されたE要素 | CSS2 | 言語疑似クラス |
| E:enabled { ... } | 有効な(enabled)状態の要素 | CSS3 | UI要素状態疑似クラス |
| E:disabled { ... } | 無効な(disabled)状態の要素 | CSS3 | UI要素状態疑似クラス |
| E:checked { ... } | チェックされた(checked)状態の要素 | CSS3 | UI要素状態疑似クラス |
| E:indeterminate { ... } | チェック状態が不確定の状態の要素 | CSS? | UI要素状態疑似クラス |
| E:first-line { ... } | E要素の中の1行目 | CSS1 | 疑似要素 |
| E:first-letter { ... } | E要素の中の1文字目 | CSS1 | 疑似要素 |
| E:before { ... } | E要素の先頭 | CSS2 | 疑似要素 |
| E:after { ... } | E要素の末尾 | CSS2 | 疑似要素 |
| E:selection { ... } | E選択された箇所 | CSS2 | 疑似要素 |
| E:not(s) { ... } | CSS3 | 否定疑似クラス |
アスタリスク( * )は、すべての要素にマッチします。下記は、文書内のすべての要素を赤字にします。
* { color: red; }
適用する要素をタグ名で指定します。下記の例では、文書中のすべての h1要素にスタイルを適用します。
h1 { color: red; }
@namespace で指定した名前空間の中の E要素にスタイルを適用します。
svg|rect { color: red; }
下記の例では、h1, h2, h3, h4, h5, h6 に対してスタイルを適用します。
h1, h2, h3, h4, h5, h6 { color: red; }
グルーピングは様々なものに適用できます。下記の例では、h1要素、coolクラス(class="cool")の要素、idがzy123(id="zy123")の要素、訪問済リンク、src属性がhttp://で始まる要素に対してスタイルを適用します。
h1, .cool, #zy123, :visited, [src^="http://"] { color: red; }
ドット( . )で始まる名前はクラス名を示します。下記の例では、prettyクラス、coolクラスを定義しています。この場合、class="pretty" を指定した要素には perryクラスのスタイルが、class="cool" を指定した要素には coolクラスのスタイルが適用されます。
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<style>
<!--
.pretty { color: lime; }
.cool { font-size: 32pt; }
-->
</style>
</head>
<body>
<p class="pretty">これはprettyな文章です</p>
<p class="cool">これはcoolな文章です</p>
<p class="cool">これもcoolな文章です</p>
</body>
</html>
ひとつの要素に、複数のクラスを指定することもできます。複数指定した場合、class="..." に記述した順番ではなく、<style>〜</style> や外部スタイルシートファイルに後から記載した方が優先されます。
<p class="cool pretty">これは、coolでprettyな文章です</p>
下記の様に記述して、スタイルシートの定義自体を継承させることもできます。.sample.R セレクタは、順序を問わず sample と R の両方を含む要素にマッチします。また、.sample.R は .sample の CSS 定義を継承しているとも言えます。
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<style>
<!--
.sample { width:300px; }
.sample.R { color: red; }
.sample.G { color: green; }
.sample.B { color: blue; }
-->
</style>
</head>
<body>
<div>
<p class="sample R">これは width:300px で red な文章です</p>
<p class="sample G">これは width:300px で green な文章です</p>
<p class="sample B">これは width:300px で blue な文章です</p>
</div>
</body>
</html>
シャープ( # )で始まる名前はIDを示します。下記の例では、id="header" を指定した要素の色をライムに、id="footer" を指定した要素の色をグレイに指定します。ひとつの文書内で、同じクラス名を持つ要素は複数あっても構いませんが、同じIDを持つ要素はひとつにしなくてはなりません。クラスの場合は「prettyクラス」、「coolクラス」を定義し、各要素にクラスを適用するのに対し、IDの場合は、id属性で要素に一意な識別子を割り振り、その一意の要素に対してスタイルを適用しています。
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
#header { color: lime; }
#footer { color: gray; }
-->
</style>
</head>
<body>
<div id="header">これはヘッダです。</div>
<div id="footer">これはフッタです。</div>
</body>
</html>
子孫セレクタとも呼ばれます。E要素の子孫として出現する F要素にマッチします。下記の例では、ul要素の子要素や孫要素として登場する li要素に対してのみ、スタイルを指定します。ul要素の中の li要素にはスタイルが適用されますが、ol要素の中の li要素には適用されません。
ul li { color: red; }
下記の例では、第一レベルの li要素は赤、第二レベルの li要素は青、第三レベルの li要素は緑になります。
ul li { color: red; }
ul ul li { color: blue; }
ul ul ul li { color: green; }
子セレクタとも呼ばれます。E要素の子として出現する F要素にマッチします。下記の例では、body要素の直の子要素である div要素に対してのみスタイルを適用します。
body > div { margin: 10px; }
適用される要素は下記の様になります。
<body>
<div> ← スタイルが適用されます。
<div> ← スタイルは適用されません。
</div>
</div>
</body>
隣接兄弟セレクタとも呼ばれます。E要素の直後に兄弟要素として出現する F要素にマッチします。下記の例では、h1要素の直後に記述された div要素に対してスタイルを適用します。
h1 + div { border: 1px solid gray; }
<div>スタイルは適用されません。</div> <h1>ヘッダ</h1> <div>スタイルが適用されます。</div> <div>スタイルは適用されません。</div>
一般兄弟セレクタとも呼ばれます。E要素の後に兄弟要素として出現する F要素にマッチします。
h1 ~ div { color: red; }
<div>スタイルは適用されません。</div> <h1>ヘッダ</h1> <div>スタイルが適用されます。</div> <div>スタイルが適用されます。</div>
未訪問のリンク要素にマッチします。
:link { color: red; } /* 未訪問の要素 */
a:link { color: red; } /* 未訪問の a要素 */
訪問済みのリンク要素にマッチします。
:visited { color: red; } /* 訪問済み要素 */
a:visited { color: red; } /* 訪問済みの a要素 */
マウスでクリックしている最中など、アクティブな要素にマッチします。IE4 や Opera 5では a要素のみにマッチしますが、IE8, Opera 7.0以降ではすべての要素にマッチします。
:active { color: red; } /* クリック中の要素 */
a:active { color: red; } /* クリック中の a要素 */
マウスなどのポインティングデバイスで示されている要素にマッチします。
:hover { color: red; } /* マウスを乗せている要素 */
a:hover { color: red; } /* マウスを乗せている a要素 */
フォーカスがあてられている要素にマッチします。
:focus { color: red; } /* フォーカスのある要素 */
a:focus { color: red; } /* フォーカスのある a要素 */
文書のルート要素にマッチします。HTML文書の場合、常に html要素となります。
:root { color: red; }
その要素が、親要素から見て、最初の子要素である場合にマッチします。下記の例は、そのテーブルで最初の tr要素にマッチします。
tr:first-child { color: red; }
その要素が、親要素から見て、最後の子要素である場合にマッチします。下記の例は、そのテーブルで最後の tr要素にマッチします。
tr:last-child { color: red; }
その要素が、親要素から見て、最初の 該当要素である場合にマッチします。下記の例では、その列で最初の td要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:first-child と異なります。
td:first-of-type { color: red; }
その要素が、親要素から見て、最後の 該当要素である場合にマッチします。下記の例では、その列で最後の td要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:last-child と異なります。
td:last-of-type { color: red; }
その要素が、親要素から見て、n番目の子要素である場合にマッチします。下記の例では、3行目の tr要素にマッチします。
tr:nth-child(3) { color: red; }
n には、an+b や an-b の形式も指定することができます。n は 0以上の整数、2n は 2の整数倍、2n+1 は 2の整数倍に1を足したものを意味します。下記の例では、1行目は偶数番目の tr要素、2行目は奇数番目の tr要素にマッチします。
tr:nth-child(2n) { color: red; }
tr:nth-child(2n+1) { color: blue; }
2n の代わりに even を、2n+1 の代わりに odd を使用することができます。下記は、上記と同じ意味を持ちます。
tr:nth-child(even) { color: red; }
tr:nth-child(odd) { color: blue; }
その要素が、親要素から見て、後ろから n番目の子要素である場合にマッチします。an+b や an-b の形式も可能です。下記の例では、後ろから数えて2番目の要素にマッチします。
tr:nth-last-child(2) { color: red; }
その要素が、親要素から見て、n番目の 該当要素である場合にマッチします。下記の例では、3列目の td要素にマッチします。td要素のみをカウントし、th要素はカウントしない点が nth-child(n) と異なります。
td:nth-of-type(3) { color: red; }
その要素が、親要素から見て、後ろから n番目の 該当要素である場合にマッチします。
td:nth-last-of-type(3) { color: red; }
その要素が、親要素から見て、唯一の子要素である場合にマッチします。
td:only-child { color: red; }
その要素が、親要素から見て、唯一の 該当要素である場合にマッチします。
td:only-of-type { color: red; }
その要素が、子要素やテキストを持っていない場合にマッチします。
td:empty { background-color: silver; }
クリックされたリンクの対象となる <a name="...">〜</a> の要素にマッチします。下記の例では、クリックされた対象の要素を display:block で表示し、対象以外(:not)の要素を display:none で非表示にしています。現時点(2012.4.9時点)では、IE9 ではまだサポートされていませんが、Firefox、Chrome、Opera の最新版での動作を確認しています。
<style type="text/css">
.note :target {
display: block;
}
.note :not(:target) {
display: none;
}
</style>
<dl>
<dt><a href="#css">CSS</a></dt>
<dd class="note"><a name="css">CSSとは・・・</a></dd>
<dt><a href="#html">HTML</a></dt>
<dd class="note"><a name="html">HTMLとは・・・</a></dd>
</dl>
上記の表示例は下記の様になります。:target に対応していないブラウザのために、JavaScript を用いて疑似的に実現しています。
言語情報が c である要素にマッチします。下記の例では、日本語の要素を赤文字で、英語の要素を青字で表示します。言語属性は通常 lang属性で指定されます。
:lang(ja) { color: red; }
:lang(en) { color: blue; }
要素が enable の状態のときにマッチします。状態は、input要素の disable属性等で変化します。
:enable { background-color: #ffffcc; }
要素が disabled の状態のときにマッチします。状態は、input要素の disable属性等で変化します。
:disabled { background-color: #cccccc; }
要素が checked の状態のときにマッチします。状態は、チェックボックスやラジオボタンををクリックしたり、input要素の checked属性等で変化します。
:checked { background-color: #ff9999; }
ラジオボタンやチェックボックスで、要素のチェック状態が不定のときにマッチします。CSS3 のドキュメントでは正式サポートではなく、将来サポートする可能性のある疑似クラスとして定義されています。
:checked { background-color: #ff9999; }
疑似クラスが、特殊なクラスとして文書中の要素を特定するのに対して、疑似要素は文書中の要素の一部を、疑似的な要素として扱います。CSS3 からは、疑似要素はコロンを 2つにして「::疑似要素」現す様、仕様変更されましたが、互換性を保つために CSS1/CSS2 で定義された :first-line、:first-letter、:before、:after のみは、コロンはひとつでも認められています。
要素の中の1行目を意味します。下記の例では、ブラウザに表示される p要素の 1行目だけを、大文字で表示します。
p:first-line { text-transform: uppercase; }
要素の中の 1文字目を意味します。下記の例では、ブラウザに表示される p要素の 1文字目だけを、大文字で表示します。
p:first-letter { text-transform: uppercase; }
指定した要素の直前を意味します。要素の前に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の先頭に文字「■」を追加します。
h2:before { content: "■"; }
指定した要素の直後を意味します。要素の後に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の末尾に文字「■」を追加します。
h2:after { content: "■"; }
選択された箇所を意味します。下記の例では、選択した文字を赤文字のピンクの背景色でハイライトします。コロン(:)がひとつの :selection の形式はサポートされません。
::selection { color:red; background-color:#ffcccc; }
:not() は否定を示します。
:not(h1) { ... } /* h1以外の全要素 */
:not(.nocss) { ... } /* .nocssクラス以外のすべての要素 */
:not(#zy123) { ... } /* id="zy123" 以外のすべての要素 */
button:not([disabled]) { ... } /* disabled以外のボタン要素 */
attr属性を持つ要素にスタイルを適用します。下記の例の 1行目は title属性を持つ h1要素、2行目は title属性を持つすべての要素にマッチします。
h1[title] { color: red; }
[title] { color: red; }
属性を複数記述することも可能です。下記の例では、title属性、および alt属性の両方を持つ要素にマッチします。
h1[title][alt] { color: red; }
[title][alt] { color: red; }
@namespace で指定した名前空間 ns 中の attr属性を持つ要素にスタイルを適用します。
[svg|title] { color: red; }
attr属性が val である要素にスタイルを適用します。下記の例の 1行目は class="example" の属性を持つ h1要素、2行目は class="example" の属性を持つすべての要素にマッチします。
h1[class="example"] { color: red; }
[class="example"] { color: red; }
attr属性がスペースで区切られたひとつ以上の値を持つ場合、その値のひとつが val である要素にマッチします。下記は、class="cool" や class="cool groovy" の属性を持つ要素にマッチします。
h1[class~="cool"] { color: red; }
[class~="cool"] { color: red; }
attr="val" や attr="val-" の属性を持つ要素にマッチします。下記の例では、hreflang="en" や、hreflang="en-US" の属性を持つ要素にマッチします。
a[hreflang|="en"] { color: red; }
[hreflang|="en"] { color: red; }
attr属性の値が val で始まる要素にマッチします。下記の例では、href属性の値が http:// で始まる要素にマッチします。
a[href=^="http://"] { color: red; }
[href^="http://"] { color: red; }
attr属性の値が val で終わる要素にマッチします。下記の例では、href属性の値が .html で終わる要素にマッチします。
a[href=$=".html"] { color: red; }
[href$=".html"] { color: red; }
attr属性の値が val を含む要素にマッチします。下記の例では、href属性の値が //www.tohoho-web.com/ を含む要素にマッチします。
a[href*="//www.tohoho-web.com/"] { color: red; }
[href*="//www.tohoho-web.com/"] { color: red; }