アスタリスク( * )は、すべての要素にマッチします。下記は、文書内のすべての要素を赤字にします。
* { color: red; }
適用する要素をタグ名で指定します。下記の例では、文書中のすべての h1要素にスタイルを適用します。
h1 { 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="..." に記述した順番ではなく、優先度 に従って適用されます。
<p class="cool pretty">これは、coolでprettyな文章です</p>
.class は他のセレクタに加えて記述することもできます。下記は class="pretty" が指定された p 要素、class="cool" が指定された h1 要素にマッチします。
p.pretty { ... } /* <p class="pretty"> の要素にマッチ */
h1.cool { ... } /* <h1 class="cool"> の要素にマッチ */
.class 自体もセレクタなので、.pretty.cool は、cool クラスが指定された .pretty クラスの要素にマッチします。
.pretty.cool { ... } /* class="pretty cool" の要素にマッチ */
シャープ( # )で始まる名前はIDを示します。下記の例では、id="header" を指定した要素を青色に、id="footer" を指定した要素を赤色にします。ひとつの文書内で、同じクラス名を持つ要素は複数あっても構いませんが、同じIDを持つ要素はひとつにしなくてはなりません。クラスの場合は pretty クラスや cool クラス を定義して、各要素にクラスを適用するのに対し、IDの場合は、id属性で要素に一意な識別子を割り振り、その一意の要素に対してスタイルを指定します。
<!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 も他のセレクタと組み合わせることができます。
div#header { ... } /* id="header" が指定された div 要素 */
カンマ(,)はセレクタリストを指定します。下記の例では、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; }
下記の例では、mytable クラスのテーブルの th 要素および td 要素にマッチします。
table.mytable th,
table.mytable td { color: red; }
ns には @namespace で指定したネームスペースを指定します。
svg|rect { color: red; } /* ネームスペース svg の中の rect 要素 */
*|rect { color: red; } /* すべてのネームスペースの rect 要素 */
|rect { color: red; } /* ネームスペースを持たない rect 要素 */
子孫セレクタとも呼ばれます。E要素の子孫(子、孫、ひ孫...)として出現する F要素にマッチします。下記の例では、ul要素の子孫として登場する 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>
列結合子と呼ばれます。E で指定したテーブルの列の中で F にマッチする要素にマッチします。まだあまり実装されていません。下記の例では、AA列、BB列、CC列の td 要素のみの背景色を指定しています。[サポート状況] [MDN]
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>
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; }
] の前に i を記述すると、属性値の大文字・小文字を区別しないで判断するようになります。
h1[id="xyz"] { ... } /* id="xyz" にマッチする */
h1[id="xyz" i] { ... } /* id="xyz" にも id="XYZ" にもマッチする */
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; }
すべてのリンク要素(<a>)にマッチします。:link または :visited と同じ意味となります。IE や 非Chromium版 Edge ではサポートされていません。[サポート状況]
a:any-link { color: red; }
未訪問のリンク要素(<a>)にマッチします。
:link { color: red; } /* 未訪問の要素 */
a:link { color: red; } /* 未訪問の a要素 */
訪問済みのリンク要素(<a>)にマッチします。
:visited { color: red; } /* 訪問済み要素 */
a:visited { color: red; } /* 訪問済みの a要素 */
ローカルページ内のリンク(#...)にマッチします。まだあまり実装されていません。
a:local-link { ... }
URL の #id に対応する要素にマッチします。下記の例では http://～/～#html でアクセスした時は id="html" の要素に、http://～/～#css でアクセスした時は id="css" の要素にマッチします。IE を含む大半のブラウザでサポートされています。[サポート状況] [MDN]
h1:target { color: red; }
<h1 id="html">HTML</h1> <h1 id="css">CSS</h1>
URL の #id に対応する要素を子孫要素に持つ要素にマッチします。下記の例では、https://～/～#html でアクセスした時は id="html" の要素を子孫に持つ selection 要素にマッチします。まだあまり実装されていません。[サポート状況]
section:target-within { ... }
<section> <h1 id="html">HTML</h1> </section> <section> <h1 id="css">CSS</h1> </section>
<style> に scoped 属性を指定することにより、CSS を適用するスコープを制限する仕様が検討されていました。下記の例で * セレクタは #test-scope とその子孫要素にマッチします。:scope セレクタは #test-scope 要素のみにマッチします。Firefox で一時期サポートされていましたが、今は削除されています。[サポート状況] [MDN]
<div id="test-scope">
<style scoped>
* { ... }
:scope { ... }
</style>
</div>
現時点で :scope が有用なのは、JavaScript で対象要素の子要素を取得する場合などです。下記の例では #test-ul 要素の li 子要素の一覧を取得しています。querySelectorAll("> li") とするとエラーとなりますが、:scope を用いることで正常に取得できるようになります。
<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>
マウスを乗せているなど、ポインティングデバイスで示されている要素にマッチします。
:hover { color: red; } /* マウスを乗せている要素 */
a:hover { color: red; } /* マウスを乗せている a要素 */
マウスでクリック中など、アクティブな要素にマッチします。
:active { color: red; } /* クリック中の要素 */
a:active { color: red; } /* クリック中の a要素 */
フォーカスがあてられている要素にマッチします。
:focus { color: red; } /* フォーカスのある要素 */
a:focus { color: red; } /* フォーカスのある a要素 */
フォーカスがあてられていて、かつ、ブラウザが強調表示を行うべきと判断した要素にマッチします。下記の例で、input 要素はタブで移動した場合もマウスでクリックした場合も outline スタイルが適用されます。button 要素で :focus-visible を用いた場合、タブで移動した場合は強調表示必要と判断され outline が適用されますが、マウスでクリックした場合は強調表示は不要と判断され、適用されません。[サポート状況] [MDN]
<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>
フォーカスのある子孫要素を持つ要素にマッチします。下記の例では、フォーカスのある input 要素が含まれる form 要素自体が強調されます。[サポート状況] [MDN]
<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>
言語情報が c である要素にマッチします。下記の例では、日本語の要素を赤文字で、英語の要素を青字で表示します。言語属性は通常 lang属性で指定されます。
:lang(ja) { color: red; }
:lang(en) { color: blue; }
文字方向が dir である要素にマッチします。英語の様に左から右方向の場合は ltr を、アラビア語の様に右から左方向の場合は rtl を指定します。まだサポートしているブラウザは少ないようです。[サポート状況]
:dir(ltr) { color: red; }
:dir(rtl) { color: blue; }
要素が enable の状態のときにマッチします。状態は、input要素の disable属性等で変化します。
:enable { background-color: #ffffcc; }
要素が disabled の状態のときにマッチします。状態は、input要素の disable属性等で変化します。
:disabled { background-color: #cccccc; }
<input type="text" readonly> など、リードオンリーの要素にマッチします。IE ではサポートされていません。[サポート状況]
:-moz-read-only { background-color: #cccccc; }
:read-only { background-color: #cccccc; }
<input type="text"> など、リードライト可能な要素にマッチします。IE ではサポートされていません。[サポート状況]
:-moz-read-write { background-color: #cccccc; }
:read-write { background-color: #cccccc; }
プレースホルダが表示されている input , textarea 要素にマッチします。下記の例では、プレースホルダが表示されている時は背景色をスカイブルーに、表示されていない時はピンクにしています。入力を始めるとボタンを有効にしたり、プレースホルダがラベルに浮き出たりなど、Google で :placeholder-shown を検索すると、様々な CSS テクニックで利用されているようです。[サポート状況] [MDN]
<style>
input:placeholder-shown { background-color: skyblue; }
input:not(:placeholder-shown) { background-color: pink; }
</style>
<div>
<input type="text" placeholder="Your name">
</div>
デフォルトボタン、デフォルト選択肢、デフォルトチェックボックス、デフォルトラジオボタンにマッチします。ボタンはデフォルトのサブミットボタンの場合にマッチします。選択肢(option) は selected 属性がついたもの、チェックボックスやラジオボタンは checked 属性がついたものにマッチします。[サポート状況] [MDN]
<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 の状態のときにマッチします。状態は、チェックボックスやラジオボタンををクリックしたり、input要素の checked属性等で変化します。
:checked { background-color: #ff9999; }
ラジオボタンやチェックボックスで、要素のチェック状態が不定のときにマッチします。[サポート状況]
:indeterminate { background-color: #ff9999; }
:blank はまだなにも入力されていない入力部品(input や textarea)にマッチします。まだあまり実装されていません。[サポート状況]
input:blank { ... }
:valid はバリデーションチェックで問題の無いフォーム部品や form 要素にマッチします。:invalid は問題のある要素にマッチします。バリデーションチェックには input 要素の required, pattern, max, min 属性などを使用します。下記の例では問題のある部品は背景をピンクに、問題のない部品はスカイブルーに設定します。[サポート状況] [MDN]
input:valid { background-color: skyblue; }
input:invalid { background-color: pink; }
input 要素の min, max 属性で指定した範囲で、:in-range は範囲内の場合、:out-range は範囲外の場合にマッチします。下記の例では、範囲内の場合に背景をスカイブルーに、範囲外の場合に背景をピンクに変更します。[サポート状況] [MDN]
input:in-range { background-color: skyblue; }
input:out-of-range { background-color: pink; }
:required は required 属性が指定された入力部品 (input, textarea, select) にマッチします。[サポート状況] [MDN]
input:required { background-color: pink; }
:required は required 属性が指定されていない、入力が必須ではない入力部品要素 (input, textarea, select) にマッチします。[サポート状況] [MDN]
input:optional { background-color: silver; }
:valid や :invalid と同様、required, pattern, max, min などのバリデーションチェックを行いますが、画面を表示した時点では評価せず、一度でもユーザが入力した後に判断する点が異なります。Firefox でサポートされています。[サポート状況] [MDN]
input:user-valid { background-color: skyblue; }
input:user-invalid { background-color: pink; }
文書のルート要素にマッチします。HTML文書の場合、常に html要素となります。
:root { color: red; }
その要素が、子要素やテキストを持っていない場合にマッチします。
td:empty { background-color: silver; }
その要素が、親要素から見て、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; }
of style 構文を用いて、tr 兄弟要素の中で .item クラスにマッチする要素の中から n 番目の要素といった指定もできるようになりました。(サポート状況↗)
tr:nth-child(3 of .item)
その要素が、親要素から見て、後ろから n番目の子要素である場合にマッチします。an+b や an-b の形式も可能です。下記の例では、後ろから数えて2番目の要素にマッチします。
tr:nth-last-child(2) { color: red; }
その要素が、親要素から見て、最初の子要素である場合にマッチします。下記の例は、そのテーブルで最初の tr要素にマッチします。
tr:first-child { color: red; }
その要素が、親要素から見て、最後の子要素である場合にマッチします。下記の例は、そのテーブルで最後の tr要素にマッチします。
tr:last-child { color: red; }
その要素が、親要素から見て、唯一の子要素である場合にマッチします。
td:only-child { 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要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:first-child と異なります。
td:first-of-type { color: red; }
その要素が、親要素から見て、最後の 該当要素である場合にマッチします。下記の例では、その列で最後の td要素にマッチします。th要素など異なるタイプの兄弟要素は無視して、最初の td要素とマッチする点が、:last-child と異なります。
td:last-of-type { color: red; }
その要素が、親要素から見て、唯一の 該当要素である場合にマッチします。
td:only-of-type { color: red; }
テーブルの中の n 番目の列にマッチします。まだあまり実装されていません。
td:nth-col(3) { ... } /* 3番目の列 */
td:nth-col(2n) { ... } /* 2の倍数番目の列(偶数列) */
td:nth-col(2n+1) { ... } /* 2の倍数+1番目の列(奇数列) */
テーブルの中の後から数えて n 番目の列にマッチします。まだあまり実装されていません。
td:nth-last-col(3) { ... } /* 後ろから数えて3番目の列 */
疑似クラスが、特殊なクラスとして文書中の要素を特定するのに対して、疑似要素は文書中の要素の一部を、疑似的な要素として扱います。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; }
選択された箇所を意味します。下記の例では、選択した文字を赤文字のピンクの背景色でハイライトします。コロン(:)がひとつの :selection の形式はサポートされません。色、バックグランド、カーソル、アウトラインなどを変更可能ですが、すべての CSS 属性を設定できるわけではありません。CSS3 の草案で検討されましたが、現時点の最終案では削除されています。Firefox 向けには ::-moz-selection とします。
::selection { color:red; background-color:#ffcccc; }
指定した要素の直前を意味します。要素の前に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の先頭に文字「■」を追加します。
h2::before { content: "■"; }
指定した要素の直後を意味します。要素の後に文字や画像を追加する際に用いられます。下記の例では、すべての h2要素の末尾に文字「■」を追加します。
h2::after { content: "■"; }
<input type="text" placeholder="xxx"> などのプレースホルダにマッチします。
input::placeholder { color: #ccc; }
li や summary 要素の先頭の黒丸などのマーカーにマッチします。下記の例は li 要素の先頭の黒丸を赤色にします。[サポート状況] [MDN]
ul li::marker { color: red; }
ブラウザが、スペルミスと判断したテキストにマッチします。Chrome 121、Safari 17.4 でサポートされましたが日本語環境ではうまく動作しない(?)ようです。
::spelling-error {
color: red;
}
<p spellcheck="true">This is Japaaaan.</p>
ブラウザが、文法ミスと判断したテキストにマッチします。Chrome 121、Safari 17.4 でサポートされましたが日本語環境ではうまく動作しない(?)ようです。
::grammar-error {
color: red;
}
CSSカスタムハイライトAPI で定義したハイライト対象にマッチします。
::highlight(my-highlight) {
color: #fbb;
}
下記の様に、複数のセレクタをまとめて指定することができます。[サポート状況] [MDN]
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() は否定を示します。[サポート状況] [MDN]
:not(h1) { ... } /* h1以外の全要素 */
:not(.nocss) { ... } /* .nocssクラス以外のすべての要素 */
:not(#zy123) { ... } /* id="zy123" 以外のすべての要素 */
button:not([disabled]) { ... } /* disabled以外のボタン要素 */
:is とほぼ同様ですが、:where() の中で指定したセレクタは詳細度がカウントされない点が異なります。例えば上記の例で、:is() の場合は h1.sub と同じ詳細度となりますが、下記の場合は .sub と同じ詳細度となります。[サポート状況] [MDN]
h1.sub, h2.sub, h3.sub { ... }
:where(h1, h2, h3).sub { ... } /* :where()を用いてまとめたもの */
... にはセレクタを記述します。要素が ... で指定された子孫要素(または兄弟要素)を持つ場合のみマッチします。[サポート状況] [MDN]
a:has(img) { ... } /* img 要素を子孫に持つ a 要素にマッチ */
a:has(> img) { ... } /* img 要素を子に持つ a 要素にマッチ */
a:has(+ img) { ... } /* img 要素を直後の兄弟に持つ a 要素にマッチ */
form:has(.error) { ... } /* .error クラスの要素を子孫に持つ form にマッチ */
標準で定義済の要素や、カスタム要素 として定義された要素にマッチします。大量のカスタム要素を使用する際に、定義される前の要素が画面に一瞬表示されてしまうのを防ぐ場合などに便利です。下記の例では、遅延を模して画面を開いて3秒後にカスタム要素を定義しています。3秒間の間はカスタム要素を display:none で非表示にしておき、定義が完了した時点で表示するようにしています。[サポート状況] [MDN]
<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>