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