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;
}お、これなら良いかも。どうでしょ。とか妄想する日曜の夜。
Comments
はじめまして！
＞F 要素を含む E 要素にマッチさせるセレクタ
そうそう！
あったらいいのになぁ、って思いますよねー。
無いのが不思議なくらい。
オレオレ仕様までは考えたことありませんでしたが…笑
はじめまして :-)
やはりこのセレクタは欲しいですよねぇ。
でも実現は難しそう。僕の案も無限ループが発生する可能性があったりして、実際そこら辺をどう解決できるかがポイントかも知れません。
同じことよく思ってました。
詰まるところXPath式に書けるといいんですけどねー。
あー、XPath っぽいのだとピンポイントで指定とかもいけますね。
それは良いかも。