nyaou.com

CSS3 E:nth-of-type(n) でレスポンシブレイアウトに

2012-12-28 00:16:20

CSS3 のセレクタで E:nth-of-type(n) というものがあります。 E 要素の n 番目にだけ、スタイルを適用すると言うものです。
簡単なソースを紹介すると、以下のような感じ。

p { background: green; }
p:nth-of-type(2) { background: red; }

これで、ページ内にある p 要素の 2 番目の要素だけ、赤で表示されるようになります。
n には他にも数式が使用でき、奇数・偶数の指定などもできます。
すごく便利！
詳しい説明については、下記サイトがわかり易かったです。

• CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い

で、Web Designer Wall にて、E:nth-of-type(n) を使用してのレスポンシブなレイアウト作成が紹介されていました。

• Responsive Column Layouts

E:nth-of-type(n) を使うことで、例えばいくつあるか判らない要素に対して float 解除のための CSS リセットを、４つ並びであれば、１つ目および４つ目にリセットをかける、などの指定が可能になるわけです。

さらに、media queries を使用することで、各大きさに合わせた数での CSS リセットをかけることができます。

一番最初と、指定した数のみで要素が適用できる、というのはとても便利ですね。
今までは、スタイル適用するためにプログラム側で条件式を書いていましたが、それが必要無くなるわけです。すばらしい！

また、上記で紹介した E:nth-of-type(n) の説明サイトでも述べていますが、しましまのテーブルや、カラフル背景なテーブルも、これで動的にスタイル設定ができますね。

最後に Internet Explorer での対応ですが、selectivizr.js を使用することで、IE8 以下でも CSS セレクタが使用できます。

selectivizr.js 使用時は、cdnjs を利用すると効率的かなと思います。
具体的には、以下のように HTML 内に記述します。

<!--[if lt IE 9]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->

しかし、media queries を IE8 以下で使用できる respond.js と併用した場合、media queries 内でセレクタを使用すると、無効になりますのでご注意ください。

• 参考：css3-mediaqueries.jsが効かなくて困った時のまとめ

私は css-mediaquries.js を併用していますが、こちらは問題なく動いています。

Tweet