擬似クラスと擬似要素
擬似なんとかには擬似クラスと擬似要素があって、擬似クラスというのは擬似的にクラスのように振舞うもののこと、擬似要素は対象要素の特定の場所（直前とか）を示す実体のない要素のことです。
擬似クラス
a（アンカー）要素の擬似クラスは特に使用頻度が比較的高いので、これを例にとって説明します。
aの擬似クラスとしては、
- :link擬似クラス
- :visited擬似クラス
- :hover擬似クラス
があります。
リンクの色（デフォルトは青）を変えるのが:link、一度訪れたサイトの色（デフォルトは紫）を変えるのが:visited、マウスカーソルを上に乗っけたときに変わる色（デフォルトはなし）を指定するのが:hoverということになっています。
CSSで指定するには、下記の順番で記述しないとうまく反映されません。
/* CSS */
a:link {
color:#000;
}
a:visited {
color:#00f;
}
a:hover {
color:#f00;
}
「classがリンクのものを黒色に変える」という意味と同じなので擬似クラスと呼ばれるわけです。
文字の色だけでなく、文字の背景色も切り替えることができます（サンプル）。
/* CSS */
ul#b2 {
width:130px;
}
ul#b2 li {
background:#333;
color:#fff;
}
ul#b2 li a {
margin:0 0 1px 0;
padding:1px 5px;
text-decoration:none;
position:relative;
display:block;
background:#333;
}
ul#b2 li a:link,ul#b2 li a:visited {
color:#fff;
}
Ul#b2 li a:hover {
background:#888;
}
上がサンプルのメニュー部分のCSSで、これを加えることでメニューにカーソルを当てたときに背景色が切り替わります。
補足説明すると、text-decorationはリンクテキストの下線をなくすことができるプロパティ、display:blockでliがインライン要素であるのをブロックレベル要素にして文字の以外も選択範囲としている。ulにwidthを指定することも忘れずに。
position:relativeはIE6の、マウス反応範囲が広がらないバグ対策として記述。
そして、これを応用するとロールオーバーボタンを作ることができます。画像を予め準備しておき、
83.gif
84.gif
85.gif
86.gif
87.gif
88.gif
89.gif
90.gif
<!--htmlファイルへの記述--> <div id="a1" class="clearfix"> <ul id="a2"> <li id="a3"><a href="#"><img src="84.gif" alt="84.gif" /></a></li> <li id="a4"><a href="#"><img src="83.gif" alt="83.gif" /></a></li> <li id="a5"><a href="#"><img src="85.gif" alt="85.gif" /></a></li> </ul> </div>
まずは上のようにリストタグで整列させます。そのときボタン1つ1つに別々のIDを割り振っておきます。こういうときにCSS3の擬似セレクタ便利なんですよね。
そうしたら、スタイルシートをいじって、ボタンをまずはfloatで横並びにして、clearfix（after擬似要素を使ったコンテンツ生成）で</ul>と</div>の間にコンテンツを生成してそこにclear:bothで回り込み解除。ボタンの背景に切り替え後の画像を仕込ませておいて、マウスカーソルがボタンの上にきたら（hover）、visibilityで上部の画像を見えなくして背景画像を表示させます。
/* CSS */
#a1 {
width:500px;
background:url(86.gif) top left repeat-x;
}
#a2 {
margin-left:20px;
}
#a2 li {
list-style-type:none;
float:left;
}
#a2 li a {
position:relative;
display:block;
}
#a2 li a:hover img {
visibility:hidden;
}
#a3 {
background:url(88.gif) no-repeat;
}
#a4 {
background:url(87.gif) no-repeat;
}
#a5 {
background:url(89.gif) no-repeat;
}
あとは、first-child擬似クラスも比較的よく使用するCSS2擬似セレクタで、例えばtableの一番左の1列だけの色を変えたい場合とかに使うよいです。（セル結合していると駄目）
/* CSS */
td:first-child {
color:#f00;
}
子要素として最初に出てくるtdを赤にするという意味で、何行もあるテーブルであればtrも沢山あるけれど、あくまでtrの子要素として1番目という意味。
<tr> <td></td> <--ここ--> <td></td> </tr> <tr> <td></td><--ここ--> <td></td> </tr>
擬似要素
擬似要素はafterとbeforeくらいしかわかりません。
ともにcontentプロパティで要素の前か後ろにコンテンツを生成するときに使用することが多いです。
/* CSS */
ul li:before {
content:">";
}
<!-- HTML --> <ul"> <li>ここに生成</li> <li></li> <li></li> </ul>
この場合はliの前ではなく、liの開始タグの直後に生成します。（見た目はliの前に生成したように見えます）
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>
