定義リストなんかで横並びにすること結構ありますよねー
僕は専らdt ddで作ります
（なんかソースがスマートやしｗｗ）
その作り方なんかは目の前の箱で検索すればすぐ出てくるので割愛、
今回はその1行目のデザインを変えたい場合についての忘備録です
ほら、見出しにしたいとかいろいろあるやん？
パッとで思いつくのが
dl dt:first-child {
（色とか線とか）
}
dl dd:first-child {
（色とか線とか）
}
これだよね～
駄菓子菓子、ddは:first-childが利かない！
なんということでしょう(T＿T)
どうやらdtを挟んでいるため、隣接セレクタを使う必要があるとか･･･
てことで上のコードを修正、こうなります
dl dt:first-child {
（色とか線とか）
}
dl dt:first-child + dd {
（色とか線とか）
}
（隣接セレクタはIE6非対応、でももういいよね♪）
これでまたシアワセなコーディング生活ができますな
例えばリストの最初（最後）だけ罫線を消したい場合に使うのが:first-child（:last-child）
とても便利ですよね～最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽
これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑
その場合は
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script> <![endif]-->
をヘッダに指定してIEでも使えるようにすればOK！
これで幸せなマークアップライフを過ごせますね
さて、CSS3では上記以外にも様々な擬似クラスが定義されています
結構使えるんですよね～
:nth-type(n)
これは、ある要素の隣接している子要素を最初から数えてn番目にあたる要素にスタイルを適用するもの
最後から数えたい場合は:nth-last-child(n)
nの値を変えることで様々な箇所に対応できます
奇数の場合はoddもしくは2n+1、偶数はevenもしくは2n
数字を直接指定するとその番目のみ・・・
というように
あぁ、素晴らしい
上記に似て非なるものが
:nth-of-type(n)
これはある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用
最後からの場合は:nth-last-of-type(n)
nの指定の仕方は前のと同じ
これらの違いは、子要素すべてか同じ子要素のみか
<p>～</p>
<p>～</p>
<h2>～</h2> ←p:nth-child(3)
<p>～</p> ←p:nth-of-child(3)
<p>～</p>
<p>～</p>
ということですな
ちなみに
<script type="text/javascript">
$('e:last-child').css('border', 'none');
</script>
とjQueryで指定したらIE関係なく疑似クラス使えたり。。。
もちろん:nth-child(n)や:nth-of-child(n)もありますよん
ｊQuery恐るべし
mouseoverして下さい
パンくずリストをどうやって実装するか-
コーディングする度にどの方法が最適なのかを考えてしまいます
どの方法を使えばよいか決定的な理由が見いだせず、”これ”と決めれずにいました
色々と調べてみていると、
せっかくHTML5で記述しとぅんやし、それを使ってみようかなーという気に
ということでやってみたのが以下
<nav> <ol> <li><a href="/" rel="index up up up">第一階層</a></li> > <li><a href="/products/" rel="up up">第二階層</a></li> > <li><a href="/products/dishwashers/" rel="up">第三階層</a></li> > <li>現在位置</li> </ol> </nav>
rel属性は、リンク元からリンク先への位置づけを示します
その内、indexは索引文書を示します（と書いてました・笑）
つまりはindex.htmlを指すってことですね
upは自分から見てどれだけ上の階層かを示します
1階層上ならupは1つ、2階層上なら2つ、というように
これ以外に、Google先生はHTML5のマイクロデータを使うことを推奨しています
はて、マイクロデータ？？
詳しくはココをチェックして下さい
マイクロデータとは、タグに意味付けを与えるものです
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" itemprop="url"> <span itemprop="title">洋服</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses/real" itemprop="url"> <span itemprop="title">ドレス</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url"> <span itemprop="title">緑のドレス</span> </a> </div>
例えば上記のようなもの
いちばん外側のdivにあるitemtypeで一意的に意味付けをし、
itempropでタグにその中での意味を与えます
・・・若干煩雑かな？
現状ではまだ非現実的かも
ということで、<nav>を使った最初の方法か、
もっと簡単に
<p><a href="/">ホーム</a> > <a href="#">第一階層</a> > <a href="#">第二階層</a> > 現在位置</p>
でも良いかも
自分はFirefox使い
彼は、長い半角文字列だと律儀に折り返さず一列に表示してしまいます
自分の関わる案件だとこれはマズい。。。
そんな時に使えるのが…
word-wrapプロパティとword-breakプロパティ
word-wrapは表示範囲に収まりきらない単語がある場合に、単語の途中で折り返すかどうかを指定できます
word-wrap: normal; デフォルト値、特になにもしない
word-wrap: break-word; 必要に応じて折り返します
word-breakは、文の途中で折り返すかどうかを指定できます
word-break: normal; デフォルト値、特になにもしない
word-break: break-all; 言語に関係なく表示範囲で折り返し、単語の途中で折り返すことも
word-break: keep-all; 言語に関係なく、単語の途中では改行せず単語の切れ目で改行されます
これを折り返し表示させたい要素に加えると適切な位置で折り返してくれます
これらは元々IEが独自に採用したものですが、
CSS3で標準装備されるようなので、結果的にほとんどのブラウザで適用されている模様