擬似クラスと擬似エレメント


擬似クラスと擬似エレメントとは

 擬似クラスと擬似エレメントは、セレクタに特別な効果を与えるために使用されます。例えば、a:visitedは訪問済みのリンクを表します。:visitedを付けないとどれが訪問済みのリンクかの識別ができなくなります。

a:visited {
  color: indigo;
  text-decoration: underline;
}

 擬似クラスと擬似エレメントの数はあまり多くありません。次の表に一覧を示します。:link~:hoverについてはリンクのページも参照してください。

セレクタ意味
:linka:link未訪問のリンク
:visiteda:visited訪問済みのリンク
:activea:activeアクティブなリンク
:hovera:hoverマウスカーソルがあるリンク
:focusinput:focusフォーカスのあるinputタグ
::first-letterp::first-letter最初の文字
::first-linep::first-line最初の行
::first-childp:first-child最初の子要素
::beforep::beforecontentで指定した文言を前に挿入する。
::afterp::aftercontentで指定した文言を後に挿入する。
:lang(language)p:lang(ja)lang="ja"で始まる段落。

 

::first-letterのサンプル

p::first-letter {
  color: green;
}

::afterのサンプル

p::after {
  content: " ** ";
}

content属性は::before, ::afterとともに使用される属性で、指定した内容を挿入する。例えば、上のようにp::afterが設定されているとき、pタグの内容には必ず" ** "が追加される。

 

 

このページの先頭へ戻る