【CSS】セレクタ – その3 疑似クラス / 疑似要素

その1 基本セレクタ
その2 グループ化 / 結合子
その3 疑似クラス / 疑似要素(今回)

疑似クラスと疑似要素の違いは以下の通りです。

疑似クラス ⇒ 「:link」のようにコロン1つ
要素が特定の状態である場合にスタイルを適用させる

a:link { スタイルプロパティ }
/* リンク先が未訪問の <a> 要素のスタイルを指定 */

疑似要素 ⇒ 「::first-line」のようにコロン2つ
要素の一部に対してスタイルを適用させる

p::first-line { スタイルプロパティ }
/* <p> 要素の1行目のスタイルを指定 */

以下、疑似クラスの機能ごと、及び疑似要素を表にまとめましたが、基本的に CSS レベル 1 ~ 3 のみです。
(:read-only と :read-write はレベル 4 ですが、IE 以外のメジャーの最新のブラウザで実装されているので含めました。)

疑似クラス

リンク関連

構文 説明
:link リンク先が未訪問。<a>, <area>, <link>など、href 属性を持つ要素を選択。
:visited リンク先が訪問済。<a>, <area>, <link>など、href 属性を持つ要素を選択。
:hover カーソルをその要素の上に置いているが、まだクリックにしていない状態。
「:link」「:visited」の後、「:active」の前に記述。
:active クリック中。<a> 及び <bottun> で使われる。
「:link」「:visited」「:hover」の後に記述。
:target #のついたリンクをクリックしたとき、対応するid値を持つ要素に適用。

兄弟要素の位置関連

構文 説明
:nth-child(n)
:nth-child(An + B)
兄弟グループの中で n 番目の要素を選択。順番を数える際、指定以外の要素も含めてカウント。
例):nth-child(4) ⇒ 4番目 :nth-child(4n) ⇒ 3つ置き :nth-child(2n+1) ⇒ 奇数
:nth-child(2n) ⇒ 偶数 :nth-child(odd) ⇒ 奇数 :nth-child(even) ⇒ 偶数
:nth-last-child(n)
:nth-last-child(An + B)
兄弟グループの中で後ろから n 番目の要素を選択。(順番を数える際、指定以外の要素も含めてカウント。)
例)引数の取り方は、:nth-child と同じ。
:nth-of-type(n)
:nth-of-type(An + B)
兄弟グループの中で n 番目の要素を選択。(順番を数える際、指定した要素のみカウント。)
例)引数の取り方は、:nth-child と同じ。
:nth-last-of-child 兄弟グループの中で後ろから n 番目の要素を選択。(順番を数える際、指定した要素のみカウント。)
例)引数の取り方は、:nth-child と同じ。
:first-child 兄弟グループの中で最初の要素。(指定以外の要素も含めてカウント。)
:last-child 兄弟グループの中で最後の要素。(指定以外の要素も含めてカウント。)
:first-of-type 兄弟要素のグループの中でその種類の最初の要素。(指定以外の要素を含めない。
:last-of-type 兄弟要素のグループの中でその種類の最後の要素。(指定以外の要素を含めない。
:only-child 兄弟要素がない要素。
:only-of-type 同じ型の兄弟要素がない要素

フォーム関連

構文 説明
:enabled 有効な要素。
:disabled 無効な要素。<input> で「disabled=”disabled”」が選択されているなど。
:checked チェックされている状態。<input type=”radio”>, <input type=”checkbox”>, <option> で利用。
:indeterminate チェックが不確定な状態。<input type=”radio”> でフォーム内の同じ name のラジオボタンが未選択な場合など。
:default 初期値の指定がある要素。<button>, <input type=”radio”>, <input type=”checkbox”>, <option> で利用。
:required required 属性の指定がある要素。<input>, <select>, <textarea> で利用。
:optional required 属性の指定がない要素。<input>, <select>, <textarea> で利用。
:valid 内容の検証に成功した要素。<input> やその他の <form> で利用。
:invalid 内容の検証に失敗した要素。<input> やその他の <form> で利用。
:in-range 入力値が min および max 属性による制限範囲内にある状態。<input> で利用。
:out-of-range 入力値が min および max 属性による制限範囲外にある状態。<input> で利用。
:read-only ユーザが編集できない要素。<input> で「readonly」属性が指定されている場合。Firefox では要プレフィックス。
:read-write ユーザが編集できる要素。Firefox では要プレフィックス。
:forcus フォーカスを持つ要素が選択されている状態。フォームなどで利用。
:forcus-within フォーカスを持つ要素が選択されている時、フォーカスを含む要素を選択。フォームなどで利用。

その他

構文 説明
:root ルート要素を選択。 HTML では、:root は <html> 。
:empty 空の要素。(コメントや処理指示は空として扱われる。改行、インデント、スペースなどは空として扱われない。)
:lang() 定義された言語を持つ要素。例)p:lang(ja) ⇒ 日本語が選択された <p>。
:not() 選択されたセレクタに一致しない要素。例)p:not(.demo) ⇒ class=”demo” が指定されていない <p>。
:fullscreen 全画面表示の状態。

疑似要素

構文 説明
::first-line ブロックレベル要素の最初の行に適用。
::first-letter ブロックレベル要素の最初の文字に適用。(最初の文字より前に画像などの他のコンテンツがない場合。)
::before 選択した要素の最初の子要素としてコンテンツを作成。(その要素の直前に表示される。)
::after 選択した要素の最後の子要素としてコンテンツを作成。(その要素の直後に表示される。)
::placeholder <input> または <textarea> のプレイスホルダー文字列に適用。
::selection 選択された文字列、画像などに適用。
カテゴリーCSS

2 Replies to “【CSS】セレクタ – その3 疑似クラス / 疑似要素”

コメントは受け付けていません。