• かちびと.net

    CSS3の:nth-childセレクタで、3n+2とかを計算するやつがあったのでメモ・・・というかおさらい。どうも覚えられないので・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSS3の:nth-childセレクタで、3n+2とかを計算するやつ

スポンサーリンク

あんまり使わないような使うようなセレクタ
の:nth-childですが、自分の頭が宜しくない
ようで、適応させたい箇所の計算で混乱しま
す・・面倒くさいと思っていたのでいいツール
ないかなと思ってたんですがシンプルでいい
のがあったので同じく計算嫌いな方向けに
シェアします。

E:nth-child(n)は、親要素のn番目の子要素であるE要素にスタイルを適応させます。とは理解しつつも、(2n+5)とかになってくるとなんか混乱するんですよね。なんで混乱するんだろw

Nth-Child Visual Calculator


n+2とか3n+8とか入れるだけで適応される箇所を明示してくれる、ってだけのシンプルなものです。何度か使って計算の仕方をおさらいしました。使ってないとまた忘れそうですけどね・・


こうやって見てみると8n+5なら5個目スタートで8を足していけばいいだけ、って分かるんですけど。アホなものですみませんw

用途

:nth-childって何に使うの?って感じですけど、ストライプを作るとか、サムネイルを交互に左右に持っていくとか、リストの上位3つにnewをつけるとか地味に便利なんです。

でもCSS3じゃないか、IEじゃ使えんと思われるかもですけど、jQueryでサポートしてくれているので一応IE6でも7でも実装出来ますのでクロスブラウザで使えるセレクタとして個人的には認識していますです。

$(‘li:nth-child(3n+2)’)とか書いてaddClass()で要素にclassを与えればcss3と同じ感覚で使えると思います。

まぁでもやっと理解しました(今更

計算機は以下です。

Nth-Child Visual Calculator

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services