Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

疑似クラス、疑似要素

■ 疑似クラス・疑似要素

セレクタには、疑似クラス、疑似要素というものがあります。

■ 疑似クラス

要素名や属性など絵分類できない状態に対してスタイルを設定するために、疑似クラスというものがあり、次のような疑似クラスが定義されています。要素名に続けて記述してください。

:link    まだ見ていない(キャッシュされていない)ページへのリンク 
:visited 
 既に見た(キャッシュされている)ページへのリンク
:hover   
マウスカーソルが要素と重なっているとき(まだアクティブではないとき)
:active   
リンク部分を選択した瞬間(クリックなど)
:focus   
対象がクリックされたとき
:lang    
(言語コード)スタイルを適用させる言語

■ 作例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>疑似クラス</title>
<style type="text/css">
<!--
a:link{color:#0000ff}
a:visited{color*#080}
a:hover{color:rgb(128,000,128)}
a:active{color:fuchsia}
-->
</style>
</head>
<body>
<h1>CSSとは</h1>

CSSとは何か

■ 疑似要素
ツリー構造を構成する要素などでは指定できない部分に対してスタイルを設定するために、次のような疑似要素が定義されています。要素名に続いて指定してください。
:first-line    要素の表示上の最初の一行(ブロックレベル要素にのみ指定可能) 
:first-letter 
 要素の最初の一文字(一部のブロックレベル要素にのみ指定可能)

:before      
要素の直前に生成追加される内容(contentプロパティと併用)

:after   
  要素の直後に生成追加される内容(contentプロパティと併用)
■ 作例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>疑似クラス</title>
<style type="text/css">
<!--
div:first-line{color:#ff0099}
p:first-letter{
font-size:300%;
font-weight:bold;
color:green;
float:left }
div:before{color:rgb(128,000,128)}
p:after{color:fuchsia}
-->
</style>
</head>
<body>
<h1>CSSとは</h1>

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box | CSS Trial