Q&A
＞そういったことはできないのでしょうか？
→ このままでは「丸投げ」と低評価を受ける可能性があります。
自身で考えたコード等（現状と理想とする画像等があればさらに良いかと思います）を提示されたうえで、問題点を質問にされると良いかと思います。
CSSのみでイラストやアニメーションを作成する際に、after等の疑似要素を使えば簡単に少し凝ったものが作れますよね。
作成した疑似要素にさらに疑似要素として子要素を追加すれば、htmlに手を加えなくてもさらに複雑なものも表現できると思うのですが、そういったことはできないのでしょうか？
Javascriptを使用すれば子要素を追加すれば良いだけなので単純ですが、CSSだけではできませんか？
ご意見ありがとうございます。
個人的には、自分の思い通りに動くようなコードを求めるような「丸投げ」ではなく、疑問点を投げかけただけのシンプルな質問だと思っています。
疑似要素は単純な子要素でもないですし、疑似要素に対して後からアクセスする方法が思いつきませんでした。
少なくとも検索して多くの情報が得られるような問題ではなかったため、「基本的には進んで行うべき行為ではないが、何かしらの方法があるのではないか？」と考え質問を投稿しました。
具体的にはどのようなことを何を試せば「丸投げ」と受け取られないとお思いでしょうか？
＞具体的にはどのようなことを何を試せば「丸投げ」と受け取られないとお思いでしょうか？
→ 例えば、質問内容を試して見て、その結果がどうだったのか？
どのような結果にしたいのか？
の具体例（コードやキャプチャ、イメージ等、および参考サイト等）を提示されると、「丸投げ」とは言われないと思います。
「自分で調べた内容」を質問文に書けば良いと思います。
回答していて一番困るのは「それは既に調べました」です。
「書いていない情報」は回答者に伝わりません。
https://teratail.com/help/question-tips#questionTips3-5-4
>yoshinaviさん
既に書きましたが、どのようなことを試せば良いか分からないための質問です。
投稿する前から漠然とした質問だとは思っており、ご意見を受けて目的のイメージ図は確かにあれば良いなと思いましたが、どのようなイメージ図を乗せれば良いかすら検討がつきません・・・。
>think49さん
例えば上に書いたことですが、
・疑似要素は一般的には後からアクセスすることができないと認識している。
の一文でもあれば答えやすくなりますか？
「認識」ではなく、「調査した内容」「試した内容」を書いてください。
一般にこの手の質問へのアプローチは2つあります。
■リファレンス
「～に情報があるようです」→「その情報はすでに調べていて、でも～に疑問があって…」→「初めからそう書いて！調べるのに1時間かかったんだけど！」
■試す
「～のコードを書いてみたら出来ませんでした」→「そのコードは既に試していますが、何か方法がないかと思い、質問しました」→「では、私の試し損ですね」
＞どのようなことを試せば良いか分からないための質問です。
→ ご自分で書いているとおり、「疑似要素にさらに疑似要素として子要素を追加」したコードを作成提示して、問題点（と思うところ）を、「質問」すれば良いかと思います。
・
少し話が食い違う原因が分かりました。
「通常の方法(::afterなど)では疑似要素に疑似要素の追加はできない」というのは(入門サイトで紹介されるような)当然の情報であり、他人も当然と思っていると考えていました。
ですので、「明らかにその操作ではできない」「そりゃそうだ、当然だ」となるレベルだという認識でした。
かなりの初学者ですので、自分が調べたことに知識が偏っていたからだと思います。
お二方とも何度もありがとうございます。
think49さんのアプローチの仕方が非常に分かりやすかったです。
今回の私の例は極端ですが、間違っているとことを当然と思っていることもありますものね・・・。
今後質問する際は、回答者の目線で出せる情報を考えていきたいと思います。
もしかして、
a::after::afterみたいに入れ子にできないのか？ってこと言いたいのですか？？
入れ子にできないのを知っている上で、何らかの方法があるのではないかと疑問を覚えて投稿しました。
回答3件
0
ベストアンサー
Selectors Level 4
疑似クラスと同様、疑似要素も，［ 文書ソース／文書ツリー ］内には現れず, それを改変することもない。 したがって疑似要素は、構造上の疑似クラスの解釈にも, ［［ 疑似要素の出自の要素や, そのツリー ］に該当するような，他の選択子 ］の解釈にも影響しない。
疑似要素をセレクタでマッチさせる事は出来ません。
定義済みの疑似要素を改変するには、CSS宣言そのものを書き換えます。
Re: brsice さん
投稿2019/06/20 11:39
編集2019/06/20 12:41総合スコア18162
このような記述をなかなか見つけられず、おそらく出来ないのだろうなぁ、程度の認識でした。
この記述通りに考えると、疑似要素に擬似要素を追加することは当然できないし、後からアクセスすることもできないということで良いのでしょうか？
追記しました。
CSSStyleSheetというオブジェクトがあるのですね、知りませんでした。
これを使えば既に定義された疑似要素に新たなプロパティの追加などはできるのですね。
つまり、「疑似要素に後からアクセス」はできるが、「疑似要素に擬似要素を作成」はできない、ということで良いでしょうか。
疑似要素にアクセスできるのではなく、疑似要素の宣言部分(CSSStyleSheet)にアクセスできます。
DOM上にない疑似要素にはアクセスできません。
よく分かりました。
ということは疑似要素自体も、DOMに影響しない要素を追加できるかなり特殊な操作なのですね。
疑似要素にDOMを用いた操作ができない理由が分かりました。
DOMに影響しない疑似要素に擬似要素を追加できるかどうか、というのは原因としてまた少し話が違うような気がするのですがどうでしょうか？
(もちろん明確にできるという情報がないことから不可能なのでしょうが)
> DOMに影響しない疑似要素に擬似要素を追加できるかどうか、というのは原因としてまた少し話が違うような気がするのですがどうでしょうか？
同じと考えていましたが…。
生成された疑似要素を選択子(セレクタ)で選択出来ないのなら、セレクタそのものを書き換えて間接的に疑似要素に干渉するしかありません。
「選択」できないなら、「生成」に干渉するセレクタがある可能性を考えたのでしょうか。
あるいは、「複数の疑似要素を生成するセレクタ(例: ::after-nest)」でしょうか。
セレクタがある可能性を考慮しているのでしょうか。
---
回答に書いた仕様に矛盾しない範囲で、「再帰的に疑似要素を生成する方法」の可能性を示唆して下さい。
可能性に該当する部分を一つずつ、仕様書を読み進めれば、答えが出ます。
https://triple-underscore.github.io/css-pseudo-ja.html
論理的に筋道立てて文章を書いて頂けると、意図が伝わりやすくなると思います。
疑似要素は特殊な子要素と考えるなら、一般的な子要素を持つことができない疑似要素でも、特殊である疑似要素は例外的に持つことができる"可能性がある"という話です。
"可能性がある"というのは、何かを根拠にその可能性が示唆されたのではなく、特殊性から可能性が0でないと判断して何らかの方法がないか知りたかったわけです。
当初の私としては、「通常の子要素ではない特殊性を持ってしても、擬似要素に擬似要素を作ることはできない」ことのへの確かな記述や根拠、あるいはそれを可能にする何らかの方法を求めていました。
あまりに特殊性を騒ぎ立てると、それについての記述があるソースすら意味を薄めてしまいますし、記述がなくとも先人が経験上理解している事実すら十分ではなくなってしまうので反省しております。
分かりづらい質問に何度もお答え頂きありがとうございます。
現状の仕様ではできないと認識しましたので、こちらからの質問はこれで控えさせていただきます。
0
think49さんのご回答で全てかと思いますが、
補足として。
結果、できません。
一つ、仕様の考え方として、
ネストされる要素に対して効かせられるのが擬似要素とも考えられます。
なぜなら、
imgや、inputなど、ネストを作らない、単体要素に対しても、擬似要素は効かせられないからです。
各ブラウザの検証ツールで、ご覧いただければわかると思いますが、
各要素のネストの中に、beforeなりafterができているのが確認できるかと思います。
擬似要素、それ自体も、仕様上の概念的には、imgやinputなどと同じように、ネストを作らない単体要素という扱いなのでしょう。
仕様上の話は、think49さんの回答や、コメントの通りで、
「疑似要素をセレクタでマッチさせる事は出来ません。」とおっしゃる通り、
あくまでDOM上に存在している要素に対して付与できる要素が、擬似要素なので、
これは仕様上仕方ありません。
概念的には、私の回答上記のことかと思います。
（imgなどのネストを作らない単体要素に対しては擬似要素は効かせられないと同様の概念）
投稿2019/06/21 00:44
総合スコア9528
回答ありがとうございます。
>imgや、inputなど、ネストを作らない、単体要素に対しても、擬似要素は効かせられない
そうなのですね、知りませんでした。
この事実を知っていれば、疑似要素も単体要素のようなものであると推察し、単体要素のような疑似要素にも擬似要素は作れないだろう、と素直に考えられたかもしれません。
おおよそ情報は出ているのにも関わらず、追加で説明して頂いてありがとうございます。
蛇足ですが、念のためコメントしておきます。
> imgや、inputなど、ネストを作らない、単体要素に対しても、擬似要素は効かせられない
仕様ではそのようになっていますが、置換要素の扱いは CSS Generated Content Module Level 3 において明確に記述されるまで定義されていなかったため、 WebKit, Blink などの実装は仕様と一致していません。
https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html
s8_chuさん>大変にありがとうございます・・・。
完全にドキュメント調査不足でした。
今実際に確認してみましたが、
確かに、擬似要素自体は、どんなCSSを効かせても、表示自体はされなかったですが、
要素検証上は、擬似要素を効かせると、
<input>
::after
</input>
という状態となりました。
まさに、仕様としては扱いはありませんが、ドキュメント通り、"許可"はされており、
実装はされている、という状態でした。
大変に勉強になりました。
本当にありがとうございます。
0
回答を修正しました。
投稿2019/06/20 11:34
編集2020/03/22 04:56
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
