(K)DL定義リストで表組みした時にfirst-childが効かない時の対処法

今回は定義リストの＜dl＞＜dt＞＜dd＞で表組みを作成していた時に、ちょっと詰まった所の備忘録です。
よくある会社概要とかのコンテンツで、こんな感じのデザインにしようとしました。

dl_dt_dd_01

下線（border-bottom）を引いた簡単なレイアウトを組んだ時に＜dt＞と＜dd＞で文字の高さが違う場合、レイアウトが崩れます。

dl_dt_dd_02

こんな時は上線（border-top）を引けば、線が崩れる事はありませんが、一番最初の項目の線は消したいところです。こんな感じで↓一番最初ですから普通に考えて＜dt＞と＜dd＞に「first-child」を指定してやりました。

dl dt:first-child{
     border-top:none;
}

dl dd:first-child{
     border-top:none;

ですが。これでは＜dt＞はboaderが消えますが、＜dd＞は消えませんorz

原因は間に挟んでる＜dt＞が原因

＜dt＞の方は効いてるのですが、＜dd＞には効いてません。
＜dl＞と＜dd＞の間に＜dt＞が挟まれているので隣接セレクタで対応する必要があったみたいなので、以下のようにCSSを変更。

dl dt:first-child{
     border-top:none;
}

dl dt:first-child + dd{
     border-top:none;

これで、思い通りの設定ができました。

出来上がったソースコードはこんな感じ

【HTML】

<dl>

          <dt>社名</dt><dd>web(K)campus</dd>
          <dt>住所</dt><dd>大阪市北区のどこかその辺</dd>
          <dt>URL</dt><dd>https://webkcampus.com</dd>
          <dt>業務内容</dt><dd>WEB制作・DTP・映像制作</dd>
     </dl>

【CSS】


body{
     width: 100%;
     min-width: 320px;
     font-size: 12px;
     padding:5%;
}    
dl{
     width:90%;
     border: 1px solid #666666;
     padding:3%;
     box-sizing: border-box;
     background-color:#fafafa;
}
    
dl dt{
     border-top:1px dashed #666666;
     float: left;
     width:25%;
     padding:2% 0;
}
dl dd{
     border-top:1px dashed #666666;
     padding:2% 0;
     margin-left: 25%;
}

dl dt:first-child{
     border-top:none;
}

dl dt:first-child + dd{
     border-top:none;
}

DEMO