CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。 基本的な使い方 まず、「nth-child」と「nth-of-type」の基本的な使い方を説明します。 nth-childの説明 一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。 具体的には以下のように使います。
前回の記事「CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用」では、:nth-child()などのセレクタを利用してリストのデザインをカスタマイズした。今回は、これらのセレクタを利用したときに発生する問題点を見ていきたい。 なお、ブラウザはFirefox 3.1(ベータ版)、Safari 3.1、Google Chrome、Operaが対応している。Internet Explorerはバージョン8(ベータ版)でも対応していない。 :nth-child()の問題 前回は、<li>でマークアップしたリストの項目を奇数と偶数で色分けして表示するため、li:nth-child(odd)とli:nth-child(even)で次のようにスタイルシートを指定した。 ここでは、奇数番目の項目の背景を黄色で、偶数番目の項目の背景を水色で表示するように指定している。ブラウザの表示を確
nth-child() 疑似クラスを試してみる 2008-05-26 0 0 XHTML/CSS CSS, nth-child CSS3で定義される nth-child() 疑似クラス。これが使えるようになると,HTMLファイル,CSSファイルのメンテナスが楽になるだろうな...と思うのです。 どんな具合か,ちょっと試してみました。 nth-child() 疑似クラスとは 英文ですが,詳細は以下から。W3Cの Working Draft(草案)ですので,今後変更されることがあるかもしれません。 Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class その要素が何番目の子要素かによって,該当するものにだけ,CSSをあてることができます。 たとえば,セレクタにul li:nth-child(2n),または
Windows 7 を使い始めてひと月ほど経つ。Sandy CPU と SSD の載ったマシン上の Windows 7 は快適そのものである。ただ、調べ方が悪いためちょっとした設定ができなくて困ることがある。今回はその代表のような話で、忘れないうちにメモしておく。 この記事の「いささか冗長な」タイトルのように、Windows 7 の Alt + Tab でのウィンドウ切り替え (フリップ) の挙動は、選択したウィンドウに一定期間フォーカスが当たっていると、そのウィンドウが前面に出てくるようになっている。慣れればこれで使いやすいのかもしれないが、どうも私は使いづらく感じた。そこで、「Windows 7」「Alt + Tab」「前面に出てくる」「無効」なんかのキーワードで Google 検索をかけるわけだが、なかなか目的の情報に到達しない。要はキーワードが悪いのだ。ところが、一度この「前面に出
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く