以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

斜め読み

//startup.dino.co.jp/2008/04/22/network-4/" target="_blank">スタートアップ研修記 ≫ network#7 DNSってなんだろう?:「ホスト名とIPアドレスの対応付けをする仕組み。※この対応付けのことを「名前解決」という。」
//labs.unoh.net/2008/04/csshtml.html" target="_blank">ウノウラボ Unoh Labs:CSSによるデザインワークと相性のよいHTMLって?:リスト系要素(ul,ol,dl)の最初と最後が特定できるようにしておく←理由は分かるが、htmlに直接書き込まないで、:first-child、:last-childに対応してないブラウザに対してだけ、javascriptで書き込んだ方がよいんでは?

リスト系要素(ul,ol,dl)の最初と最後が特定できるようにしておく

:first-childなどの擬似要素がすべてのブラウザでちゃんと使えればこんなものはあまり必要ないのですが、IE6などの対応状況を考えると現実問題としてまだまだ使えません。

ので、リストなどの同じ要素の連続するものの場合は、できるだけ最初と最後に「これが最初の要素」「これが最後の要素」だということがわかるようにしておきます。

<ul>
<li class="first">xxxx</li>
<li>xxxx</li>
<li>xxxxx</li>
<li class="last">xxxx</li>
</ul>

なんでこういうことが必要になるかというと、

  • 最初の要素だけマージンを狭く/広くしたい
  • 最後の要素だけマージンを狭く/広くしたい
  • 最初の要素のところにだけ背景画像指定したい
  • インライン化して横並びのメニューにして、間に線を入れたいんだけど全部のli要素に線を割り当てると一本余計になるので消したい

などなど、最初/最後の要素はちょっとだけ違うスタイルにしたいことが結構よくあるからです。