疑似クラス (pseudo class)

疑似クラスとは、特定の性質に適用できるセレクタです。

疑似クラスは、style属性 (インラインCSS) では指定できません。

分類 クラス 適用条件 Level
動的 :link 未訪問リンク CSS1
:visited 訪問済みリンク
:active クリックされた
:hover マウスポインタが要素上にある CSS2
:focus フォーカスされた
言語 :lang(language-code) language-codeの言語
構造 :first-child 最初の要素 (親要素の種類は無関係)
:last-child 最後の要素 (親要素の種類は無関係) CSS3
:first-of-type 親要素と同一種類の要素のうち、最初の要素
:last-of-type 親要素と同一種類の要素のうち、最後の要素
:nth-child(an+b) 最初からan+b番目の要素 (親要素の種類は無関係)
:nth-last-child(an+b) 最後からan+b番目の要素 (親要素の種類は無関係)
:nth-of-type(an+b) 親要素と同一種類の要素のうち、最初からan+b番目の要素
:only-child  
:only-of-type  
:root  
:empty  
ターゲット :target アンカー リンクへ移動した
UI要素の状態 :enabled disabled属性が指定されていない
:disabled disabled属性が指定されている
:checked チェックされているか、on状態
:indeterminate JavaScriptでindeterminate属性がtrueにされている
  :read-write   ?
  :read-only readonly属性が指定されている
標準疑似クラスの索引 - 疑似クラス (Pseudo-classes) - CSS | MDN CSS Selectors Reference

:link

:link {
    background-color: yellow;
}

:visited

利用者の履歴が調べられることを防止するため、:visitedで適用できるのは色に関する以下のスタイルに制限されています。プライバシーと :visited セレクタ - CSS | MDN

  • color
  • background-color ※:visited以外でbackground-colorを指定していないと、適用されない
  • border-color
    • border-bottom-color
    • border-left-color
    • border-right-color
    • border-top-color
  • outline-color
  • column-rule-color
  • fillとstrokeの色の部分?
指定しているスタイル 適用例
color: red Link
background-color: red Link
border-color: red
(border-style: solid も別に指定)
Link
outline-color: red
(outline-style: solid も別に指定)
Link
font-weight: bold Link

:hover

タッチスクリーンでは、:hoverはほとんど機能しません。

a:hover
<a href="javascript:;">
a:hover
<a>
p:hover

<p>

a:hover, p:hover {
    background-color: yellow;
}

:lang()

指定の言語に関係していると判断された要素に適用されます。判定の基準となるのはlang属性やmeta要素、それにHTTPヘッダなどです。

:lang(language-code) { style properties }
:lang - CSS | MDN

対象をlang属性に限定するならば、[lang='language-code']としても同じです。

  • en
  • ja
  • zh
<ul>
    <li lang="en">en</li>
    <li lang="ja">ja</li>
    <li lang="zh">zh</li>
</ul>
li:lang(en) {
    color: red;
}
li:lang(ja) {
    background-color: yellow;
}
li[lang='zh'] {
    font-weight: bold;
}

:nth-child()

  1. A
  2. B
  3. C
  4. D
  5. E
li:nth-child(2n+1) { /* 奇数番目 */
    color: red;
}
li:nth-child(even) { /* 偶数番目 (2nとしても同じ) */
    font-size: x-large;
}
li:nth-child(3) { /* 3番目 */
    font-weight: bold;
}
li:nth-child(n+3) { /* 3番目以降 (一般兄弟セレクタでも表現可能) */
    background-color: yellow;
}
li:nth-child(-n+3) { /* 3番目まで */
    border-left: 5px blue solid;
}

tableの特定のセルへの適用例

1 2 3
4 5 6
7 8 9
tr:nth-child(2)>:nth-child(2){ /* 2番目のtr要素の、2番目の子供要素 */
    background-color: yellow;
}

:nth-of-type()

:nth-child()と異なり、親要素と同一種類の要素だけが対象となります。

div1 (1番目の子要素、div要素としては1番目)
span2 (2番目の子要素)
div3 (3番目の子要素、div要素としては2番目)
div4
<div id="a">
    <div>div1</div>
    <span>span2</span>
    <div>div3</div>
    <div>div4</div>
</div>
#a :nth-of-type(2) { /* 親要素と同一種類の、2番目の要素 */
    background-color: yellow;
}
#a :nth-child(2) { /* 親要素の種類とは関係なく、2番目の要素 */
    color: red;
}

:target

:target疑似クラスは、

<a id="a">AAA</a>

のような要素へ、

<a href="#a">AAA</a>

のような要素から移動したときに適用されます。

適用例

a:target {
    background-color: yellow;
}

なお:targetはIE9やOpera 9.5より前には対応していないため、それらのブラウザ向けにはJavaScriptなどで代替手段を提供する必要があります。レッド ■ ワン: red-one: CSS3: Target 疑似クラスを実装するスクリプト sfTarget.js を(勝手に)作り直し ブラウザ実装状況 - :target - CSS | MDN

:checked

:checked疑似クラスは、

  • ラジオボタン … <input type="radio">
  • チェックボックス … <input type="checkbox">
  • オプション … <select>内の<option>

に適用されます。ただしチェックボックスやラジオボタン自体にはスタイルが適用されないため、たとえばその直後に継続するlabel要素に適用されるようにスタイルを指定します。

適用例

<input type="checkbox" id="foo"/>
<label for="foo">チェックボックス</label>
input:checked + label {
    background-color: yellow;
}

:read-only

input[type='text'] {
    border: 1px silver solid;
    border-radius: 2px;
    padding: 2px 1px;
}
input[type='text']:read-only {
    background:#eee;
}
input[type='text']:disabled {
    background:#ddd;
}
:read-only - CSS | MDN

a要素での疑似クラスの記述順

a要素では疑似クラスを記述するときの順番が重要で、

  1. :link … 未訪問
  2. :visited … 訪問済み
  3. :hover … マウスポインタが要素上にある
  4. active … クリックされた

の順にする必要があります。これはCSSにおいては、後に定義したものが先のものを上書きするためです。

適用例

a:link, a:visited {
    text-decoration: none;
}

a:hover {
    background-color: yellow;
}