個別記事

前後の記事

こんなセレクタが CSS にあれば便利なのにと思うセレクタ

この記事が属するカテゴリー
CSS

CSS を書いていると、こんなセレクタがあれば便利なのになぁと思うものがある。例えば、 F 要素を含む E 要素にマッチさせるセレクタ。img 要素を含む li 要素は list-style-type: none; みたいな。そんなセレクタをオレオレ仕様で無駄に考えてみる。

F 要素を含む E 要素ってのを結合子を使った文脈セレクタ系で実装しようとすると、子供セレクタを逆にして E < F とか。さしずめ親セレクタってな感じか。

li < img {
  list-style-type: none;
}

あー、これは無いな。子供セレクタと区別しにくいし、対象要素が宣言ブロック {…} の直前ではなくて遡るってのは何となくカスケーディングという思想に反するかな。

そうなると擬似クラス系か。CSS3 のセレクタで、最新版の草案では無くなっちゃったんだけど、ひとつ前の版には内容擬似クラス（Content pseudo-class）ってのがあった。:contains("foo") という形で、引用符で囲っている引数は内包している文字列が対象となっていた。テキスト内に foo が含まれる場合にマッチするってな具合。これをもとに要素なんかを引数に使えるようにしてみるとか。

li:contains(img) {
  list-style-type: none;
}

お、これなら良いかも。どうでしょ。とか妄想する日曜の夜。

2007-04-22T21:52:37+09:00 | コメント (4) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/405

このリストは、次のエントリーを参照しています: こんなセレクタが CSS にあれば便利なのにと思うセレクタ:

Marginal Leaves さんからのトラックバック
prototype.jsの$$で:containsとその拡張を使えるようにしてみる
「Lucky bag::blog: こんなセレクタが CSS にあれば便利なのにと思うセレクタ」を読んで、妄想してるだけでもなんなのでprototype... [続きを読む]
2007年04月23日 22:55

コメント

masaya さんからのコメント

はじめまして！

＞F 要素を含む E 要素にマッチさせるセレクタ
そうそう！
あったらいいのになぁ、って思いますよねー。
無いのが不思議なくらい。

オレオレ仕様までは考えたことありませんでしたが…笑

2007年04月22日 23:45
e-luck さんからのコメント [TypeKey Profile Page]

はじめまして :-)
やはりこのセレクタは欲しいですよねぇ。
でも実現は難しそう。僕の案も無限ループが発生する可能性があったりして、実際そこら辺をどう解決できるかがポイントかも知れません。

2007年04月23日 23:04
leva さんからのコメント

同じことよく思ってました。
詰まるところXPath式に書けるといいんですけどねー。

2007年04月24日 00:21
e-luck さんからのコメント [TypeKey Profile Page]

あー、XPath っぽいのだとピンポイントで指定とかもいけますね。
それは良いかも。

2007年04月24日 16:53

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)