こんにちは。
いつも見てくれてありがとうございます。
エンデ・バタローです。
たまたま検索で見つけた方もこんにちは。
夜だったらこんばんは。朝なら。。。まぁいっか。
本題ですが、IDもclassも指定してない要素内のテキストをCSSで指定できるのかについて。
たとえば以下のDivがあった時に、中のテキストをCSSで指定できるか？ですが
// HTML <div>こんばんは。エンデ・バタローです。</div>
結論、できなかったです。
できないのでjQueryの「:contains()」で操作する方法になりました。
以下は、全てダメだった方法です。
いろいろやるだけやってみたり試行錯誤したので書かせてください。
まずは、内部のテキストをどうにか指定するために訳わからない指定を書いてみる。
div[text="こんばんは"] { color: red; }
見るからに無理そうな指定方法。
指定したいdivには、text属性なんてついてないから、どこにも当たらないCSSになってしまった。
次は、これ。
div > "こんばんは" { color: blue; }
これもなんだかよくわからない指定になってる。
見るからにダメそう。
でもこの書き方は、div直下の小要素に対して指定するものだから
“こんばんは”のテキストを持ったdivにスタイルを当てれるか？と思って書いた。
ダメだった。
次は、これ。
div:not(:has(>*)) { color: yellow; }
これは、指定できました。
でも、小要素を持たないdivを全て指定しているので、他の指定とバッティングする。
絶対に。
これじゃダメだ。
次は、これ。
"こんばんは" { color: orange; }
もう全く、投げやりなCSSの記述。
これ書いたら死刑ねって位ダメな感じ。
これは、なんだろう？なんだろうね？
ダメだよね。
次は、これ
div:has(:contains("こんばんは")) { color: pink; }
jQueryの:contains()があるくらいだからCSSでも、もしかしたらと思って書いた記述。
でもやっぱり、そんなん無かった。
こうして色々試したけど、CSSで要素内のテキストを選択する方法は無かった。
wordpressの管理画面で要素を指定する時、JSで記述すると読み込みのラグがあるからどうにかCSSでと思って試行錯誤した結果でした。
まだまだ知らないことが無限にあるCSSなので、
「本当はあるんじゃない！？」ってどこかで思ってしまってる自分もいるので、見つけたら共有します。
みんなも知っていたら教えて欲しい。
コメント