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

目次

基本セレクタ(basic selector)

tagName { ... }

型セレクタ(type selector)と呼ばれます。適用する要素をタグ名で指定します。下記の例では、文書中のすべての h1要素にスタイルを適用します。

CSS
h1 { color: red; }

.class { ... }

クラスセレクタ(class selector)と呼ばれます。ドット( . )で始まる名前はクラス名を示します。下記の例では、pretty クラス、cool クラスを定義しています。この場合、class="pretty" を指定した要素には perry クラスのスタイルが、class="cool" を指定した要素には cool クラスのスタイルが適用されます。

HTML
<!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="..." に記述した順番ではなく、優先度 に従って適用されます。

HTML
<p class="cool pretty">これは、coolでprettyな文章です</p>

.class は他のセレクタに加えて記述することもできます。下記は class="pretty" が指定された p 要素、class="cool" が指定された h1 要素にマッチします。

CSS
p.pretty { ... }       /* <p class="pretty"> の要素にマッチ */
h1.cool { ... }        /* <h1 class="cool"> の要素にマッチ */

.class 自体もセレクタなので、.pretty.cool は、cool クラスが指定された .pretty クラスの要素にマッチします。

CSS
.pretty.cool { ... }     /* class="pretty cool" の要素にマッチ */

#id { ... }

IDセレクタ(ID selector)と呼ばれます。ハッシュ(#)で始まる名前はIDを示します。下記の例では、id="header" を指定した要素を青色に、id="footer" を指定した要素を赤色にします。ひとつの文書内で、同じクラス名を持つ要素は複数あっても構いませんが、同じIDを持つ要素はひとつにしなくてはなりません。クラスの場合は pretty クラスや cool クラス を定義して、各要素にクラスを適用するのに対し、IDの場合は、id属性で要素に一意な識別子を割り振り、その一意の要素に対してスタイルを指定します。

HTML
<!DOCTYPE html>
<html>
<head>
<title>テスト</title>
<style>
#header { color: blue; }
#footer { color: red; }
</style>
</head>
<body>
  <div id="header">これはヘッダです。</div>
  <div id="footer">これはフッタです。</div>
</body>
</html>

#id も他のセレクタと組み合わせることができます。

CSS
div#header { ... }      /* id="header" が指定された div 要素 */

* { ... }

全称セレクタ(universal selector)と呼ばれます。アスタリスク(*)は、すべての要素にマッチします。下記は、文書内のすべての要素を赤字にします。

CSS
* { color: red; }

ns|E { ... }

ネームスペースセパレータ(namespace separator)と呼ばれます。ns には @namespace で指定したネームスペースを指定します。

CSS
svg|rect { color: red; }      /* ネームスペース svg の中の rect 要素 */
*|rect { color: red; }        /* すべてのネームスペースの rect 要素 */
|rect { color: red; }         /* ネームスペースを持たない rect 要素 */

属性セレクタ(attribute selector)

[attr]

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

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

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

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

[attr=value]

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

CSS
h1[class="example"] { color: red; }
[class="example"] { color: red; }

] の前に i を記述すると、属性値の大文字・小文字を区別しないで判断するようになります。

h1[id="xyz"] { ... }     /* id="xyz" にマッチする */
h1[id="xyz" i] { ... }   /* id="xyz" にも id="XYZ" にもマッチする */

[attr~=value]

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

CSS
h1[class~="cool"] { color: red; }
[class~="cool"] { color: red; }

[attr|=value]

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

CSS
a[hreflang|="en"] { color: red; }
[hreflang|="en"] { color: red; }

[attr^=value]

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

CSS
a[href^="http://"] { color: red; }
[href^="http://"] { color: red; }

[attr$=value]

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

CSS
a[href$=".html"] { color: red; }
[href$=".html"] { color: red; }

[attr*=value]

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

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

[ns|attr]

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

CSS
[svg|title] { color: red; }

結合子(combinator)

E , F { ... }

セレクタリスト(selector lists)と呼ばれます。E要素および F要素にマッチします。3個以上記述することもできます。下記の例では、h1, h2, h3, h4, h5, h6 に対してスタイルを適用します。

CSS
h1, h2, h3, h4, h5, h6 { color: red; }

下記の例では、h1要素、coolクラス(class="cool")の要素、idがzy123(id="zy123")の要素、訪問済リンク、src属性がhttp://で始まる要素に対してスタイルを適用します。

CSS
h1, .cool, #zy123, :visited, [src^="http://"] { color: red; }

下記の例では、mytable クラスのテーブルの th 要素および td 要素にマッチします。

CSS
table.mytable th,
table.mytable td { color: red; }

E F { ... }

子孫結合子(descendant combinator) と呼ばれます。E要素の子孫(子、孫、ひ孫...)として出現する F要素にマッチします。下記の例では、ul要素の子孫として登場する li要素に対してスタイルを指定します。

CSS
ul li { color: red; }

下記の例では、第一レベルの li要素は赤、第二レベルの li要素は青、第三レベルの li要素は緑になります。

CSS
ul li { color: red; }
ul ul li { color: blue; }
ul ul ul li { color: green; }

E > F { ... }

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

CSS
body > div { margin: 10px; }

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

HTML
<body>
  <div>     ← スタイルが適用されてマージンがつきます
    <div>   ← スタイルは適用されません
    </div>
  </div>
</body>

E + F { ... }

次兄弟結合子(ext-sibling combinator) と呼ばれます。E要素の直後に兄弟要素として出現する F要素にマッチします。下記の例では、h1要素の直後に記述された div要素に対してスタイルを適用します。

CSS
h1 + div { border: 1px solid gray; }
HTML
<div>スタイルは適用されません。</div>
<h1>ヘッダ</h1>
<div>スタイルが適用されます。</div>
<div>スタイルは適用されません。</div>

E ~ F { ... }

後続兄弟結合子(subsequent-sibling combinator) と呼ばれます。E要素の後に兄弟要素として出現する F要素にマッチします。

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

E || F { ... }

列結合子(column combinator) と呼ばれます。E で指定したテーブルの列の中で F にマッチする要素にマッチします。まだあまり実装されていません。下記の例では、AA列、BB列、CC列の td 要素のみの背景色を指定しています。[MDN]

CSS・HTML
col.colA || td { background-color: pink; }
col.colB || td { background-color: lightblue; }
col.colC || td { background-color: lightgreen; }

<table>
  <col class="colA">
  <col class="colB">
  <col class="colC">
  <tr><th>AA</th><th>BB</th><th>CC</th></tr>
  <tr><td>a1</td><td>b1</td><td>c1</td></tr>
  <tr><td>a2</td><td>b2</td><td>c2</td></tr>
  <tr><td>a3</td><td>b3</td><td>c3</td></tr>
</table>

疑似クラス(pseudo-classes)

入力疑似クラス

:autofill

ブラウザが自動補完した <input> 要素にマッチします。

CSS
input {
  border-radius: 4px;
}
input:autofill {
  border: 2px solid red;
  outline-width: 0px;
}
HTML
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

:enabled

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

CSS
:enable { background-color: #ffffcc; }

:disabled

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

CSS
:disabled { background-color: #cccccc; }

:read-only

<input type="text" readonly> など、リードオンリーの要素にマッチします。IE ではサポートされていません。[サポート状況]

CSS
:-moz-read-only { background-color: #cccccc; }
:read-only { background-color: #cccccc; }

:read-write

<input type="text"> など、リードライト可能な要素にマッチします。IE ではサポートされていません。[サポート状況]

CSS
:-moz-read-write { background-color: #cccccc; }
:read-write { background-color: #cccccc; }

:placeholder-shown

プレースホルダが表示されている input , textarea 要素にマッチします。下記の例では、プレースホルダが表示されている時は背景色をスカイブルーに、表示されていない時はピンクにしています。入力を始めるとボタンを有効にしたり、プレースホルダがラベルに浮き出たりなど、Google で :placeholder-shown を検索すると、様々な CSS テクニックで利用されているようです。[サポート状況] [MDN]

HTML
<style>
input:placeholder-shown { background-color: skyblue; }
input:not(:placeholder-shown) { background-color: pink; }
</style>

<div>
  <input type="text" placeholder="Your name">
</div>

:default

デフォルトボタン、デフォルト選択肢、デフォルトチェックボックス、デフォルトラジオボタンにマッチします。ボタンはデフォルトのサブミットボタンの場合にマッチします。選択肢(option) は selected 属性がついたもの、チェックボックスやラジオボタンは checked 属性がついたものにマッチします。[サポート状況] [MDN]

HTML
<style>
button:default { font-weight: bold; }
option:default { font-weight: bold; }
input:default { outline: 3px solid skyblue; }
</style>

<form>
  <button type="submit">OK</button>
  <button>Cancel</button>
  <select>
    <option selected>Option#1</option>
    <option>Option#2</option>
    <option>Option#3</option>
  </select>
  <label><input type="checkbox" checked> Checkbox</label>
  <label><input type="checkbox"> Checkbox</label>
  <label><input type="radio" name="radio1" checked> Radio</label>
  <label><input type="radio" name="radio1"> Radio</label>
</form>
表示

:checked

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

CSS
:checked { background-color: #ff9999; }

:indeterminate

ラジオボタンやチェックボックスで、要素のチェック状態が不定のときにマッチします。[サポート状況]

CSS
:indeterminate { background-color: #ff9999; }

:blank

:blank はまだなにも入力されていない入力部品(input や textarea)にマッチします。まだあまり実装されていません。[サポート状況]

CSS
input:blank { ... }

:valid

バリデーションチェックで問題の無いフォーム部品や form 要素にマッチします。問題のある要素にマッチします。バリデーションチェックには input 要素の required, pattern, max, min 属性などを使用します。下記の例では問題のある部品は背景をピンクに、問題のない部品はスカイブルーに設定します。[サポート状況] [MDN]

CSS
input:valid { background-color: skyblue; }
input:invalid { background-color: pink; }

:invalid

バリデーションチェックで問題のある要素にマッチします。バリデーションチェックには input 要素の required, pattern, max, min 属性などを使用します。下記の例では問題のある部品は背景をピンクに、問題のない部品はスカイブルーに設定します。[サポート状況] [MDN]

CSS
input:valid { background-color: skyblue; }
input:invalid { background-color: pink; }

:in-range

input 要素の min, max 属性で指定した範囲で範囲内の場合にマッチします。下記の例では、範囲内の場合に背景をスカイブルーに、範囲外の場合に背景をピンクに変更します。[サポート状況] [MDN]

CSS
input:in-range { background-color: skyblue; }
input:out-of-range { background-color: pink; }

:out-of-range

input 要素の min, max 属性で指定した範囲で範囲外の場合にマッチします。下記の例では、範囲内の場合に背景をスカイブルーに、範囲外の場合に背景をピンクに変更します。[サポート状況] [MDN]

CSS
input:in-range { background-color: skyblue; }
input:out-of-range { background-color: pink; }

:required

required 属性が指定された入力部品 (input, textarea, select) にマッチします。[サポート状況] [MDN]

CSS
input:required { background-color: pink; }

:optional

required 属性が指定されていない、入力が必須ではない入力部品要素 (input, textarea, select) にマッチします。[サポート状況] [MDN]

CSS
input:optional { background-color: silver; }

:user-valid

:valid や :invalid と同様、required, pattern, max, min などのバリデーションチェックを行いますが、画面を表示した時点では評価せず、一度でもユーザが入力した後に判断する点が異なります。Firefox でサポートされています。[サポート状況] [MDN]

CSS
input:user-valid { background-color: skyblue; }
input:user-invalid { background-color: pink; }

:user-invalid

:valid や :invalid と同様、required, pattern, max, min などのバリデーションチェックを行いますが、画面を表示した時点では評価せず、一度でもユーザが入力した後に判断する点が異なります。Firefox でサポートされています。[サポート状況] [MDN]

CSS
input:user-valid { background-color: skyblue; }
input:user-invalid { background-color: pink; }

言語擬似クラス

:dir(dir)

文字方向が dir である要素にマッチします。英語の様に左から右方向の場合は ltr を、アラビア語の様に右から左方向の場合は rtl を指定します。まだサポートしているブラウザは少ないようです。[サポート状況]

CSS
:dir(ltr) { color: red; }
:dir(rtl) { color: blue; }

:lang(c)

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

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

位置疑似クラス

すべてのリンク要素(<a>)にマッチします。:link または :visited と同じ意味となります。IE や 非Chromium版 Edge ではサポートされていません。[サポート状況]

CSS
a:any-link { color: red; }

未訪問のリンク要素(<a>)にマッチします。

CSS
:link { color: red; }      /* 未訪問の要素 */
a:link { color: red; }     /* 未訪問の a要素 */

:visited

訪問済みのリンク要素(<a>)にマッチします。

CSS
:visited { color: red; }    /* 訪問済み要素 */
a:visited { color: red; }   /* 訪問済みの a要素 */

ローカルページ内のリンク(#...)にマッチします。まだあまり実装されていません。

CSS
a:local-link { ... }

:target

URL の #id に対応する要素にマッチします。下記の例では http://～/～#html でアクセスした時は id="html" の要素に、http://～/～#css でアクセスした時は id="css" の要素にマッチします。IE を含む大半のブラウザでサポートされています。[サポート状況] [MDN]

CSS
h1:target { color: red; }
HTML
<h1 id="html">HTML</h1>
<h1 id="css">CSS</h1>

:target-within

URL の #id に対応する要素を子孫要素に持つ要素にマッチします。下記の例では、https://～/～#html でアクセスした時は id="html" の要素を子孫に持つ selection 要素にマッチします。まだあまり実装されていません。[サポート状況]

CSS
section:target-within { ... }
HTML
<section>
  <h1 id="html">HTML</h1>
</section>
<section>
  <h1 id="css">CSS</h1>
</section>

:scope

<style> に scoped 属性を指定することにより、CSS を適用するスコープを制限する仕様が検討されていました。下記の例で * セレクタは #test-scope とその子孫要素にマッチします。:scope セレクタは #test-scope 要素のみにマッチします。Firefox で一時期サポートされていましたが、今は削除されています。[サポート状況] [MDN]

HTML
<div id="test-scope">
  <style scoped>
  * { ... }
  :scope { ... }
  </style>
</div>

現時点で :scope が有用なのは、JavaScript で対象要素の子要素を取得する場合などです。下記の例では #test-ul 要素の li 子要素の一覧を取得しています。querySelectorAll("> li") とするとエラーとなりますが、:scope を用いることで正常に取得できるようになります。

HTML
<ul id="test-ul">
<li>AAA
  <ul>
  <li>BBB
  </ul>
<li>CCC
  <ul>
  <li>DDD
  </ul>
</ul>

<script>
document.getElementById("test-ul").querySelectorAll(":scope > li").forEach((e) => {
  console.log(e);    // AAA と CCC を取得
});
</script>

リソース状態疑似クラス

:playing

再生中のメディア要素にマッチします。

CSS
video:playing { ... }

:paused

一時停止中のメディア要素にマッチします。

CSS
video:paused { ... }

時間軸疑似クラス

:current

WebVTT キャプショントラックなどの表示タイミングにおいて現在表示されている要素や祖先要素にマッチします。

CSS
:current { ... }
:current(p, span) { ... }

:past

WebVTT キャプショントラックなどの表示タイミングにおいて :current よりも時間的に過去の要素にマッチします。

CSS
:past { ... }
:past(p, span) { ... }

:future

WebVTT キャプショントラックなどの表示タイミングにおいて :current よりも時間的に未来の要素にマッチします。

CSS
:future { ... }
:future(p, span) { ... }

ツリー構造疑似クラス

:root

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

CSS
:root { color: red; }

:empty

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

CSS
td:empty { background-color: silver; }

:nth-child(n)

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

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

n には、an+b や an-b の形式も指定することができます。n は 0以上の整数(0, 1, 2, 3...)、2n は 2の整数倍、2n+1 は 2の整数倍に1を足したものを意味します。下記の例では、1行目は偶数番目の tr要素、2行目は奇数番目の tr要素にマッチします。

CSS
tr:nth-child(2n) { color: red; }
tr:nth-child(2n+1) { color: blue; }

上記の機能を用いて下記の様な指定ができます。

CSS
tr:nth-child(n+10) { color: red; }                    # 10以上(10, 11, 12...)
tr:nth-child(-n+20) { color: blue; }                  # 20以下(20, 19, 18...)
tr:nth-child(n+10):nth-child(-n+20) { color: blue; }  # 10～20(10, 11, ..., 19, 20)

2n の代わりに even を、2n+1 の代わりに odd を使用することができます。下記は、上記と同じ意味を持ちます。

CSS
tr:nth-child(even) { color: red; }
tr:nth-child(odd) { color: blue; }

of style 構文を用いて、tr 兄弟要素の中で .item クラスにマッチする要素の中から n 番目の要素といった指定もできるようになりました。(サポート状況)

CSS
tr:nth-child(3 of .item)

:nth-last-child(n)

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

CSS
tr:nth-last-child(2) { color: red; }

:first-child

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

CSS
tr:first-child { color: red; }

:last-child

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

CSS
tr:last-child { color: red; }

:only-child

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

CSS
td:only-child { color: red; }

:nth-of-type(n)

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

CSS
td:nth-of-type(3) { color: red; }

:nth-last-of-type(n)

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

CSS
td:nth-last-of-type(3) { color: red; }

:first-of-type

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

CSS
td:first-of-type { color: red; }

:last-of-type

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

CSS
td:last-of-type { color: red; }

:only-of-type

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

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

:nth-col(n)

テーブルの中の n 番目の列にマッチします。あまり実装されていません。

CSS
td:nth-col(3) { ... }       /* 3番目の列 */
td:nth-col(2n) { ... }      /* 2の倍数番目の列(偶数列) */
td:nth-col(2n+1) { ... }    /* 2の倍数+1番目の列(奇数列) */

:nth-last-col(n)

テーブルの中の後から数えて n 番目の列にマッチします。あまり実装されていません。

CSS
td:nth-last-col(3) { ... }   /* 後ろから数えて3番目の列 */

ユーザ操作疑似クラス

:hover

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

CSS
:hover { color: red; }    /* マウスを乗せている要素 */
a:hover { color: red; }   /* マウスを乗せている a要素 */

:active

マウスでクリック中など、アクティブな要素にマッチします。

CSS
:active { color: red; }    /* クリック中の要素 */
a:active { color: red; }   /* クリック中の a要素 */

:focus

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

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

:focus-visible

フォーカスがあてられていて、かつ、ブラウザが強調表示を行うべきと判断した要素にマッチします。下記の例で、input 要素はタブで移動した場合もマウスでクリックした場合も outline スタイルが適用されます。button 要素で :focus-visible を用いた場合、タブで移動した場合は強調表示必要と判断され outline が適用されますが、マウスでクリックした場合は強調表示は不要と判断され、適用されません。[サポート状況] [MDN]

HTML
<style>
.f:focus { outline: 2px solid #66f; border-radius: .2rem; }
.fv:focus-visible { outline: 2px solid #66f; border-radius: .2rem; }
</style>
<div>
  <input class="f" value=":focus">
  <input class="fv" value=":focus-visible">
  <button class="f">:focus</button>
  <button class="fv">:focus-visible</button>
</div>
表示

:focus-within

フォーカスのある子孫要素を持つ要素にマッチします。下記の例では、フォーカスのある input 要素が含まれる form 要素自体が強調されます。[サポート状況] [MDN]

HTML
<style>
form { border: 1px solid gray; padding: .3rem; margin-bottom: .3rem; }
form:focus-within { background-color: #eef; }
</style>
<form>
  <input type="text">
</form>
<form>
  <input type="text">
</form>

論理結合疑似クラス

:is(...)

下記の様に、複数のセレクタをまとめて指定することができます。[サポート状況] [MDN]

CSS
h1.sub, h2.sub, h3.sub { ... }
:is(h1, h2, h3).sub { ... }	/* :is()を用いてまとめたもの */

p.c1, p.c2, p.c3 { ... }
p:is(.c1, .c2, .c3) { ... }	/* :is()を用いてまとめたもの */

:not(...)

:not() は否定を示します。[サポート状況] [MDN]

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

:where(...)

:is とほぼ同様ですが、:where() の中で指定したセレクタは詳細度がカウントされない点が異なります。例えば上記の例で、:is() の場合は h1.sub と同じ詳細度となりますが、下記の場合は .sub と同じ詳細度となります。[サポート状況] [MDN]

CSS
h1.sub, h2.sub, h3.sub { ... }
:where(h1, h2, h3).sub { ... }    /* :where()を用いてまとめたもの */

:has(...)

... にはセレクタを記述します。要素が ... で指定された子孫要素(または兄弟要素)を持つ場合のみマッチします。[サポート状況] [MDN]

CSS
a:has(img) { ... }           /* img 要素を子孫に持つ a 要素にマッチ */
a:has(> img) { ... }         /* img 要素を子に持つ a 要素にマッチ */
a:has(+ img) { ... }         /* img 要素を直後の兄弟に持つ a 要素にマッチ */
form:has(.error) { ... }     /* .error クラスの要素を子孫に持つ form にマッチ */

表示状態疑似クラス

:open

開いている状態の <dialog>, <details> および選択肢表示中の <select>, <input> にマッチします。Chrome 133 でサポートされました。(サポート状況)

CSS
dialog:open { ... }

:fullscreen

JavaScript の requestFullscreen() などによって全画面モードで表示されている要素にマッチします。

CSS
:fullscreen { ... }

JavaScript の showModal() などによってモーダルモードで表示されている要素にマッチします。

CSS
dialog:modal { ... }

:picture-in-picture

JavaScript の requestPictureInPicture() によってピクチャインピクチャモードで表示されている要素(videoなど)にマッチします。

CSS
:picture-in-picture { ... }

その他疑似クラス

:defined

標準で定義済の要素や、カスタム要素 として定義された要素にマッチします。大量のカスタム要素を使用する際に、定義される前の要素が画面に一瞬表示されてしまうのを防ぐ場合などに便利です。下記の例では、遅延を模して画面を開いて3秒後にカスタム要素を定義しています。3秒間の間はカスタム要素を display:none で非表示にしておき、定義が完了した時点で表示するようにしています。[サポート状況] [MDN]

HTML
<style>
my-element:not(:defined) { display: none; }
my-element:defined { display: block; }
</style>

<script>
window.setTimeout(() => {
  customElements.define("my-element", class extends HTMLElement {});
}, 3000);
</script>

<my-element>My Element</my-element>

:target-current

CSSカルーセル において スクロールマーカー(::scroll-marker)疑似要素の内、現在表示対象となっているマーカーを示します。詳細は スクロールマーカー を参照してください。

CSS
.carousel {
  .scroll-item {
    &::scroll-marker {
      content: "";
      width: 20px;
      height: 10px;
      border: 1px solid #ccc;
    }
    &::scroll-marker:target-current {
      background-color: #666;
    }
  }
}

疑似要素(pseudo-elements)

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

タイポグラフィック疑似要素

::first-line

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

CSS
p::first-line { text-transform: uppercase; }

::first-letter

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

CSS
p::first-letter { text-transform: uppercase; }

::cue

WebVTT のキュー要素を示します。

CSS
video::cue { ... }
video::cue(span) { ... }

ハイライト疑似要素

::selection

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

CSS
::selection { color:red; background-color:#ffcccc; }

::target-text

ブラウザが scroll-to-text フラグメント(https://.../foo.html#:~:text=... による検索表示)に対応している場合にスクロール先のテキストにマッチします。[サポート状況]

CSS
::target-text { background-color: yellow; }

::spelling-error

ブラウザが、スペルミスと判断したテキストにマッチします。Chrome 121、Safari 17.4 でサポートされましたが日本語環境ではうまく動作しない(?)ようです。

CSS
::spelling-error {
  color: red;
}
HTML
<p spellcheck="true">This is Japaaaan.</p>

::grammar-error

ブラウザが、文法ミスと判断したテキストにマッチします。Chrome 121、Safari 17.4 でサポートされましたが日本語環境ではうまく動作しない(?)ようです。

CSS
::grammar-error {
  color: red;
}

::highlight(...)

CSSカスタムハイライトAPI で定義したハイライト対象にマッチします。

CSS
::highlight(my-highlight) {
  color: #fbb;
}

ツリー永続疑似要素

::before

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

CSS
h2::before { content: "■"; }

::after

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

CSS
h2::after { content: "■"; }

::marker

li や summary 要素の先頭の黒丸などのマーカーにマッチします。下記の例は li 要素の先頭の黒丸を赤色にします。[サポート状況] [MDN]

CSS
ul li::marker { color: red; }

::placeholder

<input type="text" placeholder="xxx"> などのプレースホルダにマッチします。

CSS
input::placeholder { color: #ccc; }

::backdrop

トップレイヤに表示されるダイアログやポップオーバーの背景となる要素にマッチします。

CSS
::backdrop { background: rgb(0 0 0 / 20%); }

要素のバックヤード疑似要素

::details-content

<details> で表示/非表示が切り替わる部分のコンテンツにマッチします。ただし、border は指定できない。margin や padding は非表示の時も効いてしまうなど色々制約があるようです。使用例は <details> を参照してください。

CSS
::details-content { ... }

::file-selector-button

ファイル選択ボタンにマッチします。

CSS
::file-selector-button { ... }

::part()

シャドウツリーの中にある part 属性にマッチする要素を示します。[サポート状況] [MDN]

CSS
custom-element::part(foo) { ... }

::slotted()

シャドウDOM でテンプレート内のスロットに配置された要素を示します。[サポート状況] [MDN]

CSS
custom-element::slotted(foo) { ... }

カスタマイザブルセレクト疑似要素

::picker(select)

カスタマイザブルセレクト において、セレクト部品の選択肢部分(ポップアップする部分)を示します。

CSS
select, select::picker(select) {
  appearance: base-select;
}

::picker-icon

カスタマイザブルセレクト において、セレクト部品の右側に表示されるピッカーアイコン(▼)を示します。

CSS
select::picker-icon {
  content: "⇩";
  color: red;
}

::checkmark

カスタマイザブルセレクト において、セレクト部品の選択された選択肢の左側に表示されるチェックマーク(✔)を示します。

CSS
option::checkmark {
  content: "●";
  color: red;
}

::scroll-button(direction)

CSSカルーセル におけるスクロールボタンを生成します。direction には下記を指定します。詳細は スクロールボタン を参照してください。

CSS
.carousel {
  &::scroll-button(right) {
    content: "\21E8";
  }
  &::scroll-button(left) {
    content: "\21E6";
  }
}

::scroll-marker-group

CSSカルーセル におけるスクロールマーカーグループを生成します。詳細は スクロールマーカー を参照してください。

CSS
.carousel {
  &::scroll-marker-group {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

::scroll-marker

CSSカルーセル におけるスクロールマーカーを生成します。カルーセルにおける目次のようなものです。カレントのマーカーは :taget-current 疑似クラスで参照できます。詳細は スクロールマーカー を参照してください。

CSS
.carousel {
  .scroll-item {
    &::scroll-marker {
      content: "";
      width: 20px;
      height: 10px;
      border: 1px solid #ccc;
    }
    &::scroll-marker:target-current {
      background-color: #666;
    }
  }
}

ビュー遷移関連疑似要素

::view-transition

@view-transition によるビュー遷移において遷移全体を対象とする疑似要素を示します。下記のツリーを構成します。

::view-transition
  ::view-transition-group()
    ::view-transition-image-pare()
      ::view-transition-old()
      ::view-transition-new()
CSS
html::view-transition {
  ...
}

::view-transition-group()

::view-transition 疑似要素の子要素です。::view-transition-image-pair() 疑似要素を子要素に持ちます。

CSS
html::view-transition-group(*) {
  ...
}

::view-transition-image-pair()

::view-transition-group 疑似要素の子要素です。::view-transition-old() と ::view-transition-new() 疑似要素を子要素としてグルーピングする疑似要素です。

CSS
html::view-transition-image-pair(*) {
  ...
}

::view-transition-old()

::view-transition-image-pair() 疑似要素の子要素です。遷移前のビューを示す疑似要素です。

CSS
html::view-transition-old(*) {
  ...
}

::view-transition-new()

::view-transition-image-pair() 疑似要素の子要素です。遷移後のビューを示す疑似要素です。

CSS
html::view-transition-new(*) {
  ...
}
Copyright (C) 1997-2025 杜甫々
初版：1997年7月27日、最終更新：2025年10月5日
http://www.tohoho-web.com/css/selector.htm