Greensleeves v2.0 / Tag: Selector

Javascript を書く際、CSS のセレクタを使って要素を取得できると色々と楽です。このようなことを実現できるライブラリは、prototype.js の $$() メソッド等があるわけですが、特に cssQuery() は CSS3 の Stractural pseudo-class も大体使えるので結構面白いんじゃないかと思って試しにつかってみました。

実際に使ってみる

XHTML

<ul id="test">
   <li>1st element</li>
   <li>2nd element</li>
   <li>3rd element</li>
   <li>4th element</li>
   <li>5th element</li>
   <li>6th element</li>
</ul>

CSS

ul#test li {
   margin: 0 0 1em;
   padding: 1em;
   border: 1px solid #ccc;
   list-style: none;
}

たとえば上記のような XHTML と CSS があったとして、偶数番目の li 要素だけ文字色を #ffcc00、背景を #777777 に変えたい場合

window.onload = function () {
   var elements = cssQuery('ul#test > li:nth-child(even)')

   for(var i=0; i < elements.length; i++){
      elements[i].style.color = "#ffcc00";
      elements[i].style.backgroundColor = "#777777";
   }	
}

• サンプル: CSS のセレクタを使って要素を取得できる Javascript ライブラリ cssQuery() を使ってみる

このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。

CSS を書く際、ブラウザごとのデフォルトスタイルの差異を吸収するため * を使ったリセットを行う。という有名な Tip があります。

• Lucky bag::blog: CSS を作成する際のお約束

この手法は便利で今もここの CSS で使わせてもらっているんですが、しかしある問題を抱えている模様。それは CSS techniques I use all the time | The Montoya Herald で詳しく書かれています。言及部分を抜粋してみると。

This eliminated all differences in padding and margin across browsers so I was free to go about styling my page. Unfortunately, this isn’t a good practice. It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

簡単に言ってしまえば、ページが巨大になるとレンダリング速度に影響が出てくることと、使えるデフォルトスタイルまで殺してしまうことが懸念される。ということらしいです。

氏は同時に、自分の初期化用の CSS も載せているのでそこら辺を参考にリセット用の CSS を組んでみるのもいいかもしれません。億劫な人には Yahoo! UI Library: Reset CSS とかもお勧め。