擬似クラス (pseudo class)

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

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

分類 クラス 適用条件 Level
位置 / 動的 :link 未訪問リンク CSS1
:visited 訪問済みリンク
:active クリックされた
:hover マウスポインタが要素上にある CSS2
:focus フォーカスされた
:target アンカー リンクへ移動した CSS3
言語 :lang(language-code) language-codeの言語 CSS2
ツリー構造 :first-child 親要素の種類は無関係に、最初の要素 CSS2
: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  
入力 :enabled disabled属性が指定されていない CSS3
:disabled disabled属性が指定されている
:checked チェックされているか、on状態
:indeterminate JavaScriptでindeterminate属性がtrueにされている
:read-write    
:read-only readonly属性が指定されている  
標準疑似クラスの索引 - 疑似クラス (Pseudo-classes) - CSS | MDN CSS Selectors Reference

位置擬似クラス (Location pseudo-classes)

: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
  • SVGの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;
}

参考

:focus

:focus {
    background-color: yellow;
}

適用例

: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

a要素での記述順

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

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

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

適用例

[ 下線ありリンク ] [ 下線なしリンク ] [ 背景が変化するリンク ] 
a:link, a:visited {
    text-decoration: none;
}

a:hover {
    background-color: yellow;
}

参考

言語擬似クラス (Linguistic pseudo-classes)

: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;
}

ツリー構造擬似クラス (Tree-structural pseudo-classes)

:first-child

  1. A
  2. B
  3. C
    1. D
    2. E
    3. F
li:first-child { /* li要素の兄弟要素の中で、最初の要素 */
    color: red;
}
li :first-child { /* li要素の子孫にあたる要素であり、すべての要素の兄弟要素の中で、最初の要素 */
    background-color: yellow;
}

2番目の例ではliの後にスペースがあるため要素型セレクタとなり、:first-childが子孫セレクタと解釈されます。そして:first-childに有効なセレクタがないため全称セレクタが指定されていると見なされ、*:first-childと解釈されます。

:first-of-type

DIV_1
SPAN_1
EM_1 EM_2
SPAN_2 SPAN_3
BOLD
DIV_2
<div>DIV_1</div>
<div><span>SPAN_1</span></div>
<div><em>EM_1</em> <em>EM_2</em></div>
<div><span>SPAN_2</span> <span>SPAN_3</span></div>
<b>BOLD</b>
<div>DIV_2</div>
  • EM_2は兄弟のなかで最初のem要素ではないため、適用されない
  • SPAN_2はSPAN_1と兄弟要素ではないため、適用される
  • SPAN_3は兄弟のなかで最初のspan要素ではないため、適用されない
  • BOLDは兄弟のなかで最初のb要素であるため、適用される。ただし最初の要素ではないため、:first-childは適用されない
:first-of-type {
    font-size: x-large;
}
:first-child {
    color: red;
}

:nth-child()

兄弟要素の中の指定位置の要素に適用できます。:nth-child() - CSS: カスケーディングスタイルシート | MDN

  1. A
  2. B
  3. C
  4. D
  5. E
li:nth-child(odd) { /* 奇数番目 (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;
}

参考

:root

文書のルート要素に一致し、HTMLでは<html>要素を表します。:root - CSS: カスケーディングスタイルシート | MDN

入力擬似クラス (The input pseudo-classes)

: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

参考

HTMLの情報サイトから、まとめて検索