WWW WATCH

結構前になりますが、Lucky bag::blog さんで 「こんなセレクタが CSS にあれば便利なのにと思うセレクタ」 っていうエントリーが上がっていて、この記事自体はエントリーされた当時も読んだんですがそのときは特に反応せず。

ところが、先ほどたまたま過去記事たどりつつ読み返していたときに、ふと 「あったらいいなーっていうセレクタかぁ」 と考えてみましたので、いまさら感は多分にありますが書いてみたいと思います。

ちなみに、深く考えずに勢いで書いているので、なに寝ぼけたこと書いてんの？ と思っても大目に見てかるーく流してください。

で、あったらいいなは色々あるんですけど、例えば CSS のセレクタ仕様ってマッチングさせる際に細かい条件分岐ができないっていうのが不便なところかなぁなんて思っていて、CSS2 なんかでも属性セレクタや、CSS3 の属性セレクタ、擬似クラスなんかを使用できれば、それなりに高度なマッチングはできるものの、もうちょっとプログラム言語っぽく書けたらどうだろうなんて考えてみました。

例えば、もうそのまんま 「if セレクタ」、「else セレクタ」 みたいな感じ。書いていませんがもちろん 「elseif セレクタ」 も。

/* このソースは妄想ですよ */
if {
    li:contents(img >= 1, img:width == 80px) {
         /* style A */
          li {
              padding: 10px;
              list-style: none;
          }
     } li:contents(img >= 1, img:width < 80px)  {
         /* style B */
          li {
              padding: 20px;
              list-style: none;
          }
     } else {
         /* style C */
          li {
              padding: 10px;
              list-style: disc;
          }
     } 
}

この例だと、Lucky bag::blog さんでも挙がっていた拡張 （妄想） 版内容擬似クラス（Content pseudo-class）、contains("foo") と組み合わせたりして、

1. 1個以上の img 要素を含む li 要素のうち、横幅 （width）が 80px の画像を含む場合、「style A」 を適用
2. 上記で横幅が 80px より小さい画像を含む場合、「style B」 を適用
3. 上記 2つに該当しない場合、「style C」 を適用

みたいな感じで条件分岐とかできたら素敵とか思った。別に素敵でもないかな。。

リンク先のコメントにもあったとおり、CSS が XPath っぽく書けると楽しいことたくさんできそう。などと妄想する水曜の夜でした。

いやー妄想って本当に楽しいですね。

関連エントリー
CSS セレクタに関するおさらい
CSS3 セレクタ チートシート