2012cssWebデザインにおいてカラムをいくつか並べて、間に境界線を引くという場合がよくあります。イメージこういう場合これまで、1行目の2要素に適当なクラス名を付けた上で、それ以外の要素にborderを設定する...というような対処を行ってきました。none;}表現としては大体それで上手くいくのですが、HTMLに先頭要素がどれであるかを記述する必要があり、往々にして何らかのプログラムまたはスクリプトで対応する必要が出てきてしまいます。それがどうも面倒くさい。出来ればCSSだけでなんとかしたい。探した結果が、CSS3で採用される「:nth-child(n)」でした。それを加えるとこんな感じになります。none;}これでスマートに実現できます。:nth-child(n)の応用あれこれそういうわけで疑似クラス「:nth-child(n)」を覚えたわけですが、(n)の部分には具体的な数字だけで無く、色んな要素を指定できるようです。参考にしたのはこのあたりの記事。#ccc;}偶数の場合は「even」。奇数の場合であれば「odd」になります。#ccc;}nは0以上の整数。...」という整数の集合になります。先ほどの「偶数」は「2n」、「奇数」は「2n-1」でも代用できます。2」という整数の集合になります。TOP10ランキングの上位3つだけフォントを大きくするとか言うときに使えそうです。...」という整数の集合になります。!わかりやすい!なによりHTMLを一切いじらなくて良いのが素敵。使っていこうかなぁと思います。(他のCSS3も見てみるかー)おまけ:互換性は?今のところ、ほぼ全てのモダンブラウザが対応済みです。Explorerも9では対応済み。8では非対応となっているようです。Explorerで最も使われているバージョンが「8」である(2011年12月時点)ことを考えると、すぐに採用できるようなものでは無いかも知れませんが...まぁ、個人サイトなら良いかな。ShareTwitterFacebookBookmark投稿ナビゲーション「人を見た目で判断するな」という言葉に対して思うこと35歳になりました。20201日、風邪的なもので寝込んでおりました。(1)ProfileスズキイッペイWebデザイナ/プログラマとして15年ほど活動、現在は飲食業に身を置きつつ開業準備中。「NOBODY:PLACE」はスズキイッペイの個人的なブログです。技術的な情報や趣味であるランニングや自転車などに関するあれこれを書いています。前身となるサイトが1998年に生まれ、2005年に現在の形になりました。NOBODY:PLACE。