CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。 基本的な使い方 まず、「nth-child」と「nth-of-type」の基本的な使い方を説明します。 nth-childの説明 一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。 具体的には以下のように使います。
![「nth-child」と「nth-of-type」の使い方と違い](https://cdn-ak-scissors.b.st-hatena.com/image/square/41f84ceeb087cc9a9ecf1d64257891f092764c30/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-73.fc2.com%2Fw%2Fe%2Fb%2Fweboook%2Fwebpark-ogp.png)
今回から、CSS 3の草案「Selectors」で新しく追加されたセレクタについて紹介していきたい。これまでCSS 3のセレクタに十分に対応しているのはOperaだけだったが、FirefoxがFirefox 3.1(ベータ版)で、SafariもSafari 3.1で対応を進めたことにより、Internet Explorerを除く主要なブラウザで利用できるようになった。 今回は、「:first-child」と「:last-child」、「:nth-child()」と「:nth-last-child()」を紹介する。これらのセレクタを利用すると、最初と最後の要素や、指定したナンバーの要素、さらには奇数と偶数の要素に対してスタイルシートを適用することができる。そのため、これまでのように余計な やクラス名を追加することなく、さまざまなデザインを設定できるようになる。 たとえば、こうしたセレクタを利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く