CSSリファレンス(セレクタ)

トップ > CSSリファレンス > セレクタ

セレクタの使用方法一覧

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:any-link { ... } すべてのリンク CSS4 ロケーション疑似クラス
E:target { ... } クリックされたリンクの対象要素 CSS3 ロケーション疑似クラス
E:hover { ... } マウスが乗せられている要素 CSS2 ユーザアクション疑似クラス
E:active { ... } マウスでクリック中など、アクティブな要素 CSS1 ユーザアクション疑似クラス
E:focus { ... } フォーカスがあてられている要素 CSS2 ユーザアクション疑似クラス
E:lang(c) { ... } 言語cで記述されたE要素 CSS2 言語疑似クラス
E:enabled { ... } 有効な(enabled)状態の要素 CSS3 インプット疑似クラス
E:disabled { ... } 無効な(disabled)状態の要素 CSS3 インプット疑似クラス
E:read-only { ... } 読み込み専用項目 CSS4 インプット疑似クラス
E:read-write { ... } 読み書き可能項目 CSS4 インプット疑似クラス
E:checked { ... } チェックされた(checked)状態の要素 CSS3 インプット疑似クラス
E:indeterminate { ... } チェック状態が不確定の状態の要素 CSS? インプット疑似クラス
E:root { ... } 文書のルート要素。HTMLの場合は常に html要素 CSS3 構造疑似クラス
E:empty { ... } 子要素を持っていない E要素 CSS3 構造疑似クラス
E:nth-child(n) { ... } 親要素から見て前から n番目の子要素 CSS3 構造疑似クラス
E:nth-last-child(n) { ... } 親要素から見て後から n番目の子要素 CSS3 構造疑似クラス
E:first-child { ... } 親要素から見て最初の子要素 CSS2 構造疑似クラス
E:last-child { ... } 親要素から見て最後の子要素 CSS3 構造疑似クラス
E:only-child { ... } 親要素から見て唯一の子要素である場合の要素 CSS3 構造疑似クラス
E:nth-of-type(n) { ... } 親要素から見て前から n番目の E要素 CSS3 構造疑似クラス
E:nth-last-of-child(n) { ... } 親要素から見て後から n番目の E要素 CSS3 構造疑似クラス
E:first-of-type { ... } 親要素から見て最初の E要素 CSS3 構造疑似クラス
E:last-of-type { ... } 親要素から見て最後の E要素 CSS3 構造疑似クラス
E:only-of-type { ... } 親要素から見て唯一の E要素である場合の要素 CSS3 構造疑似クラス
E::first-line { ... } E要素の中の1行目 CSS1 疑似要素
E::first-letter { ... } E要素の中の1文字目 CSS1 疑似要素
E::selection { ... } E選択された箇所 CSS2 疑似要素
E::before { ... } E要素の先頭 CSS2 疑似要素
E::after { ... } E要素の末尾 CSS2 疑似要素
E:not(s) { ... } CSS3 否定疑似クラス

汎用セレクタ

* { ... } (C2/e7/Fx1/Ch?/Op?/Sa?)

アスタリスク( * )は、すべての要素にマッチします。下記は、文書内のすべての要素を赤字にします。

* { color: red; }

タイプセレクタ

E { ... } (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

適用する要素をタグ名で指定します。下記の例では、文書中のすべての h1要素にスタイルを適用します。

h1 { color: red; }
ns|E { ... } (C3/e9)

@namespace で指定した名前空間の中の E要素にスタイルを適用します。

svg|rect { color: red; }

グルーピング

E, F { ... } (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

下記の例では、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; }

クラスセレクタ

E.class (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

ドット( . )で始まる名前はクラス名を示します。下記の例では、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セレクタ

E#id (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

シャープ( # )で始まる名前は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 { ... } (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

子孫セレクタとも呼ばれます。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 { ... } (C2/e7/Fx?/Ch1/Op?/Sa?)

子セレクタとも呼ばれます。E要素の子として出現する F要素にマッチします。下記の例では、body要素の直の子要素である div要素に対してのみスタイルを適用します。

body > div { margin: 10px; }

適用される要素は下記の様になります。

<body>
  <div>     ← スタイルが適用されます。
    <div>   ← スタイルは適用されません。
    </div>
  </div>
</body>
E + F { ... } (C2/e7/Fx?/Ch?/Op?/Sa?)

隣接兄弟セレクタとも呼ばれます。E要素の直後に兄弟要素として出現する F要素にマッチします。下記の例では、h1要素の直後に記述された div要素に対してスタイルを適用します。

h1 + div { border: 1px solid gray; }
<div>スタイルは適用されません。</div>
<h1>ヘッダ</h1>
<div>スタイルが適用されます。</div>
<div>スタイルは適用されません。</div>
E ~ F { ... } (C3/e7/Fx?/Ch?/Op?/Sa?)

一般兄弟セレクタとも呼ばれます。E要素の後に兄弟要素として出現する F要素にマッチします。

h1 ~ div { color: red; }
<div>スタイルは適用されません。</div>
<h1>ヘッダ</h1>
<div>スタイルが適用されます。</div>
<div>スタイルが適用されます。</div>

属性セレクタ

[attr] (C2/e7/Fx1/Ch?/Op9/Sa3)

attr属性を持つ要素にスタイルを適用します。下記の例の 1行目は title属性を持つ h1要素、2行目は title属性を持つすべての要素にマッチします。

h1[title] { color: red; }
[title] { color: red; }

属性を複数記述することも可能です。下記の例では、title属性、および alt属性の両方を持つ要素にマッチします。

h1[title][alt] { color: red; }
[title][alt] { color: red; }
[ns|attr] (C3/e7/Fx1/Ch?/Op9/Sa3)

@namespace で指定した名前空間 ns 中の attr属性を持つ要素にスタイルを適用します。

[svg|title] { color: red; }
[attr="val"] (C2/e7/Fx1/Ch?/Op9/Sa3)

attr属性が val である要素にスタイルを適用します。下記の例の 1行目は class="example" の属性を持つ h1要素、2行目は class="example" の属性を持つすべての要素にマッチします。

h1[class="example"] { color: red; }
[class="example"] { color: red; }
[attr~="val"] (C2/e7/Fx1/Ch?/Op9/Sa3)

attr属性がスペースで区切られたひとつ以上の値を持つ場合、その値のひとつが val である要素にマッチします。下記は、class="cool" や class="cool groovy" の属性を持つ要素にマッチします。

h1[class~="cool"] { color: red; }
[class~="cool"] { color: red; }
[attr|="val"] (C2/e7/Fx1/Ch?/Op9/Sa3)

プレフィックスとして、attr="val" や、ハイフンを加えた attr="val-" にマッチする属性を持つ要素にマッチします。下記の例では、hreflang="en" や、hreflang="en-US" の属性を持つ要素にマッチします。

a[hreflang|="en"] { color: red; }
[hreflang|="en"] { color: red; }
[attr^="val"] (C3/e7/Fx1/Ch?/Op9/Sa3)

attr属性の値が val で始まる要素にマッチします。下記の例では、href属性の値が http:// で始まる要素にマッチします。

a[href^="http://"] { color: red; }
[href^="http://"] { color: red; }
[attr$="val"] (C3/e7/Fx1/Ch?/Op9/Sa3)

attr属性の値が val で終わる要素にマッチします。下記の例では、href属性の値が .html で終わる要素にマッチします。

a[href$=".html"] { color: red; }
[href$=".html"] { color: red; }
[attr*="val"] (C3/e7/Fx1/Ch?/Op9/Sa3)

attr属性の値が val を含む要素にマッチします。下記の例では、href属性の値が //www.tohoho-web.com/ を含む要素にマッチします。

a[href*="//www.tohoho-web.com/"] { color: red; }
[href*="//www.tohoho-web.com/"] { color: red; }

ロケーション疑似クラス

:link (C1/e3/N4/Fx1/Ch1/Op3.5/Sa1)

未訪問のリンク要素にマッチします。

:link { color: red; }      /* 未訪問の要素 */
a:link { color: red; }     /* 未訪問の a要素 */
:visited (C1/e4/N4/Fx1/Ch1/Op3.5/Sa1)

訪問済みのリンク要素にマッチします。

:visited { color: red; }    /* 訪問済み要素 */
a:visited { color: red; }   /* 訪問済みの a要素 */
:any-link (C4/Fx?/Ch?/Op?/Sa?)

すべてのリンク要素にマッチします。:link または :visited と同じ意味となります。Chrome や Opera では -webkit 付きをサポートしています。Firefox では -moz 付きをサポートしています。Safari はプレフィックス無しの :any-link をサポートしています。IE11 ではまだサポートされていません。下記の様に 3行記述すれば動作しますが、カンマ(,)でまとめて記述すると、何故か動作しないようです。

a:-webkit-any-link { color: red; }
a:-moz-any-link { color: red; }
a:any-link { color: red; }
:target (C3/e9)

クリックされたリンクの対象となる <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 を用いて疑似的に実現しています。

CSS
CSSとは・・・
HTML
HTMLとは・・・

ユーザアクション疑似クラス

:hover (C2/e4/N6/Fx1/Ch1/Op3.5/Sa1)

マウスなどのポインティングデバイスで示されている要素にマッチします。

:hover { color: red; }    /* マウスを乗せている要素 */
a:hover { color: red; }   /* マウスを乗せている a要素 */
:active (C1/e4/N4/Fx1/Ch1/Op5/Sa1)

マウスでクリックしている最中など、アクティブな要素にマッチします。IE4 や Opera 5では a要素のみにマッチしますが、IE8, Opera 7.0以降ではすべての要素にマッチします。

:active { color: red; }    /* クリック中の要素 */
a:active { color: red; }   /* クリック中の a要素 */
:focus (C2/e8/Fx1/Ch1/Op7/Sa1)

フォーカスがあてられている要素にマッチします。

:focus { color: red; }    /* フォーカスのある要素 */
a:focus { color: red; }   /* フォーカスのある a要素 */

言語擬似クラス

:lang(c) (C2/e8/Fx1/Ch1/Op8/Sa3.1)

言語情報が c である要素にマッチします。下記の例では、日本語の要素を赤文字で、英語の要素を青字で表示します。言語属性は通常 lang属性で指定されます。

:lang(ja) { color: red; }
:lang(en) { color: blue; }

インプット疑似クラス

:enabled (C3/e9/Fx1.5/Ch1/Op9/Sa3.1)

要素が enable の状態のときにマッチします。状態は、input要素の disable属性等で変化します。

:enable { background-color: #ffffcc; }
:disabled (C3/e9/Fx1.5/Ch1/Op9/Sa3.1)

要素が disabled の状態のときにマッチします。状態は、input要素の disable属性等で変化します。

:disabled { background-color: #cccccc; }
:read-only (C4/Fx/Ch/Op/Sa)

<input type="text" readonly> など、リードオンリーの要素にマッチします。Chrome, Opera, Safari でサポートされています。Firefox では -moz 付きをサポートしています。IE11 はまだサポートしていません。

:-moz-read-only { background-color: #cccccc; }
:read-only { background-color: #cccccc; }
:read-write (C4/Fx/Ch/Op/Sa)

<input type="text"> など、リードライト可能な要素にマッチします。Chrome, Opera, Safari でサポートされています。Firefox では -moz 付きをサポートしています。IE11 はまだサポートしていません。

:-moz-read-write { background-color: #cccccc; }
:read-write { background-color: #cccccc; }
:checked (C3/e9/Fx1/Ch1/Op9/Sa3.1)

要素が checked の状態のときにマッチします。状態は、チェックボックスやラジオボタンををクリックしたり、input要素の checked属性等で変化します。

:checked { background-color: #ff9999; }
:indeterminate (C3/e9/Fx3.6/Ch?/Op10.6/Sa3)

ラジオボタンやチェックボックスで、要素のチェック状態が不定のときにマッチします。CSS3 のドキュメントでは正式サポートではなく、将来サポートする可能性のある疑似クラスとして定義されています。

:indeterminate { background-color: #ff9999; }

構造疑似クラス

:root (C3/e9/Fx1/Ch1/Op9.5/Sa1)

文書のルート要素にマッチします。HTML文書の場合、常に html要素となります。

:root { color: red; }
:empty (C3/e9/Fx1.5/Ch1/Op9.5/Sa3.1)

その要素が、子要素やテキストを持っていない場合にマッチします。

td:empty { background-color: silver; }
:nth-child(n) (C3/e9/Fx3.5/Ch1/Op9.5/Sa3.1)

その要素が、親要素から見て、n番目の子要素である場合にマッチします。下記の例では、3行目の tr要素にマッチします。

tr:nth-child(3) { color: red; }

n には、an+ban-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; }
:nth-last-child(n) (C3/e9/Fx3.5/Ch4/Op9.5/Sa3.2)

その要素が、親要素から見て、後ろから n番目の子要素である場合にマッチします。an+ban-b の形式も可能です。下記の例では、後ろから数えて2番目の要素にマッチします。

tr:nth-last-child(2) { color: red; }
:first-child (C2/e7/Fx3/Ch4/Op9.5/Sa4)

その要素が、親要素から見て、最初の子要素である場合にマッチします。下記の例は、そのテーブルで最初の tr要素にマッチします。

tr:first-child { color: red; }
:last-child (C3/e9/Fx1/Ch1/Op9.5/Sa3.2)

その要素が、親要素から見て、最後の子要素である場合にマッチします。下記の例は、そのテーブルで最後の tr要素にマッチします。

tr:last-child { color: red; }
:only-child (C3/e9/Fx1.5/Ch2/Op9.5/Sa3.1)

その要素が、親要素から見て、唯一の子要素である場合にマッチします。

td:only-child { color: red; }
:nth-of-type(n) (C3/e9/Fx3.5/Ch1/Op9.5/Sa3.1)

その要素が、親要素から見て、n番目の 該当要素である場合にマッチします。下記の例では、3列目の td要素にマッチします。td要素のみをカウントし、th要素はカウントしない点が nth-child(n) と異なります。

td:nth-of-type(3) { color: red; }
:nth-last-of-type(n) (C3/e9/Fx3.5/Ch4/Op9.5/Sa3.2)

その要素が、親要素から見て、後ろから n番目の 該当要素である場合にマッチします。

td:nth-last-of-type(3) { color: red; }
:first-of-type (C3/e9/Fx3.5/Ch1/Op9.5/Sa3.2)

その要素が、親要素から見て、最初の 該当要素である場合にマッチします。下記の例では、その列で最初の td要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:first-child と異なります。

td:first-of-type { color: red; }
:last-of-type (C3/e9/Fx3.5/Ch1/Op9.5/Sa3.2)

その要素が、親要素から見て、最後の 該当要素である場合にマッチします。下記の例では、その列で最後の td要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:last-child と異なります。

td:last-of-type { color: red; }
:only-of-type (C3/e9/Fx3.5/Ch1/Op9.5/Sa3.2)

その要素が、親要素から見て、唯一の 該当要素である場合にマッチします。

td:only-of-type { color: red; }

疑似要素

疑似クラスが、特殊なクラスとして文書中の要素を特定するのに対して、疑似要素は文書中の要素の一部を、疑似的な要素として扱います。CSS3 からは、疑似要素はコロンを 2つにして「::疑似要素」現す様、仕様変更されましたが、互換性を保つために CSS1/CSS2 で定義された :first-line、:first-letter、:before、:after のみは、コロンはひとつでも認められています。

:first-line (C1/e5.5/Fx1/Ch1/Op3.5/Sa1)
◆ ::first-line (C3/e10/Fx1.5/Ch1/Op7/Sa1)

要素の中の1行目を意味します。下記の例では、ブラウザに表示される p要素の 1行目だけを、大文字で表示します。

p:first-line { text-transform: uppercase; }
:first-letter (C1/e5.5/Fx1/Ch1/Op3.5/Sa1)
◆ ::first-letter (C3/e10/Fx1.5/Ch1/Op7/Sa1)

要素の中の 1文字目を意味します。下記の例では、ブラウザに表示される p要素の 1文字目だけを、大文字で表示します。

p:first-letter { text-transform: uppercase; }
::selection (C3/e9/Fx1/Ch1/Op9.5/Sa1.1)

選択された箇所を意味します。下記の例では、選択した文字を赤文字のピンクの背景色でハイライトします。コロン(:)がひとつの :selection の形式はサポートされません。色、バックグランド、カーソル、アウトラインなどを変更可能ですが、すべての CSS 属性を設定できるわけではありません。CSS3 の草案で検討されましたが、現時点の最終案では削除されています。Firefox 向けには ::-moz-selection とします。

::selection { color:red; background-color:#ffcccc; }
:before (C2/e8/Fx1/Ch?/Op4/Sa4)
◆ ::before (C3/e10/Fx1.5/Ch?/Op7/Sa4)

指定した要素の直前を意味します。要素の前に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の先頭に文字「■」を追加します。

h2:before { content: "■"; }
:after (C2/e8/Fx1/Ch?/Op4/Sa4)
◆ ::after (C3/e10/Fx1.5/Ch?/Op7/Sa4)

指定した要素の直後を意味します。要素の後に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の末尾に文字「■」を追加します。

h2:after { content: "■"; }

否定疑似クラス

:not(x) (C3/e9/Fx1/Ch1/Op9.5/Sa3.2)

:not() は否定を示します。

:not(h1) { ... }      /* h1以外の全要素 */
:not(.nocss) { ... }  /* .nocssクラス以外のすべての要素 */
:not(#zy123) { ... }  /* id="zy123" 以外のすべての要素 */
button:not([disabled]) { ... }   /* disabled以外のボタン要素 */

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年10月25日
http://www.tohoho-web.com/css/selector.htm