今回は定義リストの<dl><dt><dd>で表組みを作成していた時に、ちょっと詰まった所の備忘録です。ある会社概要とかのコンテンツで、こんな感じのデザインにしようとしました。下線(border-bottom)を引いた簡単なレイアウトを組んだ時に<dt>と<dd>で文字の高さが違う場合、レイアウトが崩れます。こんな時は上線(border-top)を引けば、線が崩れる事はありませんが、一番最初の項目の線は消したいところです。こんな感じで↓一番最初ですから普通に考えて<dt>と<dd>に「first-child」を指定してやりました。border-top:none;ですが。これでは<dt>はboaderが消えますが、<dd>は消えませんorz原因は間に挟んでる<dt>が原因<dt>の方は効いてるのですが、<dd>には効いてません。<dl>と<dd>の間に<dt>が挟まれているので隣接セレクタで対応する必要があったみたいなので、以下のようにCSSを変更。border-top:none;これで、思い通りの設定ができました。border-top:none;}DEMOまとめちょっと冷静に考えればわかることですが、定義リストの階層を理解しておけば問題なく対処できました。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。