HTMLとCSS（その３：リスト）

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

擬似クラス”:hover”によるロールオーバーインタラクションを実装する。

つぎが、上のエレメントのマークアップです。

<div id=”pseudoClassEX”> <dl class=”parent”> <dt class=”child”>DLタグはタイトル付きリスト：DTタグはタイトル</dt> <dd class=”child”>項目１：DDタグは項目（擬似クラス”:hover”を指定）</dd> <dd class=”child”>項目２：DDタグは項目（擬似クラス”:hover”を指定）</dd> <dd class=”child”>項目３：DDタグは項目（擬似クラス”:hover”を指定）</dd> </dl> </div> <style> #pseudoClassEX { color:#059; } #pseudoClassEX .parent { position:relative; background-color:#2CE8BA; border:#88e solid 2px; line-height:1.4em; } #pseudoClassEX dt.child { padding:5px 0 0 5px; } #pseudoClassEX dd.child { margin:10px; padding:10px; background-color:#C1EEA2; border:#3b7 dotted 4px; color:#083; font-weight:bolder; } #pseudoClassEX dd.child:hover { background-color:#F8ED57; color:#970; font-style:italic; text-decoration: underline; } </style>