こんなセレクタが 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;
}

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

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/9

Marginal Leaves - prototype.jsの$$で:containsとその拡張を使えるようにしてみる (2007年4月23日 22:55)

「Lucky bag::blog: こんなセレクタが CSS にあれば便利なのにと思うセレクタ」を読んで、妄想してるだけでもなんなのでprototype... 続きを読む

Comments

masaya said:

はじめまして!

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

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

e-luck said:

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

leva said:

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

e-luck said:

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