CSS 擬似クラス、擬似要素
擬似要素とは、文書の持つツリー構造には無い内容をユーザーエージェントに描画させるための仕組みのことです。
指定の順番は以下の並びになります。たとえば「hover
」が「visited」よりも先に記述されると「visited」スタイルに上書きされてしまいます。
そのため、リンク先から戻って来たときには「hover」に書いたスタイルは無効になってしまいます。
a:link
a:visited
a:active
a:hover
擬似クラスアンカー (a要素) の状態
CSS1
| 値 | 機能 |
|---|---|
| :link | アンカー要素の未訪問状態 |
| :visited | アンカー要素の訪問済み状態 |
| :hover | 要素が選択されている状態 |
| :active | 要素のアクティブ状態 |
| :focus | 要素が選択されている状態 |
適応要素 :a要素
継承 ：する（デフォルト値＝ブラウザ依存）
| Property： | value:値 | 意味 |
|---|---|---|
| a:link {} | color : blue ; | リンク文字の色 |
| a:visited { } | color : purple; | 表示済みのリンク文字色 |
| a:active { } | color : red ; | アクティブ中のリンク文字色 |
| a:hover {} | color : red ; | リンクにマウスを合わせたときの変化 |
| text-decoration : none ; | 下線を表示しない | |
| font-weight : bold ; | 太線にする |
セレクタには擬似クラス、擬似要素というものもあります。
擬似クラスは、要素の状況やタイミングに対しスタイルを設定でき、擬似要素は要素内の特定の箇所に対してスタイルを設定できます。
擬似要素
CSS2
擬似要素には、段落を示すブロックレベル要素の1行目を指定する:first-line、ブロックレベル要素の先頭の1文字目を指定する:first-letter、またcontentプロパティと併用し、ある要素の直前または直後に追加される内容を指定する:beforeおよび:afterがあります。
| 値 | 機能 |
|---|---|
| 要素:first-letter | 要素の最初の文字に適用 |
| 要素:first-line | 要素の最初の行に適用 |
| 要素:first-child | 要素内に最初に現れる子要素の適用 |
| 要素:before | 要素の直前に適用 |
| 要素:after | 要素の直後に適用 |
適用要素 : ブロックレベル要素
要素の特定の場所で適用するスタイルシートです。
使用例:段落の最初の文字を2em（大きく)する。
p:first-letter { font-size:2em }
目的別属性
広告