cssの拡張プラグインについて。

Question

不特定多数からcssファイルをうけつけて、それを使うサイトをつくりたいのですが、cssの機能の拡張をjsですることは可能ですか？
拡張したいのはjqueryのnext.prevのようなもののみでいいです。
同じ要素内の兄弟要素を自由に選択したいです。
隣接兄弟結合子は直後の一つなので、まあnextは無理をすれば大丈夫そうですが、prevはもともとの機能がないようで拡張したいです。
すみません。日本語がめちゃくちゃ変ですね。
cssのファイルをユーザーからうけつけます。ユーザーが、それで自由に投稿した画像や要素を装飾します。そこでprevやnextのような機能が使えたらなと思いました。そこで事前にcssを拡張できるようなjsファイルを作成しておき、ユーザーにはそれを読み込んでもらいます。それでcss上でprevやnextの機能をcssで使えるようにする。これは可能ですか？

Comments

[x_x]

拡張でjsするの意味が分かりません。CSSファイルだけを受け付けるならスクリプトの出番はないのでは？

[dice142]

質問文が意味不明です。第三者が見て分かるように修正してください。やりたいことも伝わってこないです。

[dice142]

修正していただきましたが、「prevやnextの機能」がなぜ必要なのかわかりません。bootstrap的なものなのかそれともwordpressのテーマ編集みたいなものなのか似たようなサービスなど、イメージが掴める情報がほしいです。

[syosinsyaprogra]

作りたいものが、画像を複数投稿して、それを使って投稿を作れるsnsなので、隣接兄弟結合子だけでなく、prevがあればすこしはアニメーションの幅が広がるかなと思いました。

[syosinsyaprogra]

まず画像やcssファイルを投稿します。そしてそれを公開できるという形です。jsを不特定多数から受付て、不特定多数に公開するのは危険と聞いたので、cssで不完全でもすこしはアニメーションができるようにしたいです。

Answer 1

可能性の話として。

  <p>red</p>
  <p class="a">normal</p>

このようなHTMLの.aから見た兄要素のつもりでCSSファイルに次のように書いたとします。

*:has(+p.a) {
  color: red;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:has
https://drafts.csswg.org/selectors/#has-pseudo

これは現状対応ブラウザがないため、たとえquerySelectorAllを使ったとしても失敗します。

document.querySelectorAll('*:has(+p.a)'); // Uncaught DOMException

しかし、jQueryなら対応しているため取得することができます。

$('*:has(+p.a)').css({ color: 'red' });

http://api.jquery.com/has-selector/

問題はセレクタとプロパティをどのように取得するかです。
CSSOMでは取得できず、Ajaxでテキストとして取得することになるかもしれませんが、メディアクエリ・詳細度なども考慮してテキストを解析するのは困難を極めるかと思います。

Comments

[syosinsyaprogra]

そうですか、ありがとうございました。やはり難しいのですね。

Answer 2

何度も質問文とコメントを読み直しましたが、全体のイメージが掴めないので
何が聞きたいのかというところに焦点をあててみました。

質問の根本は、「CSSでJavaScriptの機能を追加できるか」ですよね？

できません。

prevやnextはおそらくユーザのマウス操作で行うものですよね。
CSS3は装飾が目的で、ユーザの操作を受け付けるものではないです。
せいぜいカーソルが乗ったとか要素が選択されたくらいしか把握できません。

Comments

[syosinsyaprogra]

そうですか。cssの隣接兄弟結合子の+って直後の要素を指定しますよね？
それを直前のものを指定するというのもできませんか？

[syosinsyaprogra]

私がnextやprevの理解をちゃんとしていないのかもしれません。、すみません。

[dice142]

> 直前のものを指定するというのもできませんか？
現状はCSSのみでそういう指定はできなさそうです。
できたとして、どう使う予定ですか？

[syosinsyaprogra]

現状ではできなさそうなのでそれをjsでできるようにしたかったのですが。
画像などを複数利用して一つの投稿を形成させたいので、htmlの兄弟要素として画像を並べて、そこでhover.activeなどで隣接兄弟結合子において直前のものを指定できれば、12345と並んでいれば、5をhoverしたときに1を変化させることができるので、サービスが向上すると思いました。
1をhoverしたときに、5を動かすことはできるのに、逆は、できないというのなら使いにくいと思いました。

[dice142]

そういう使い方であればCSSでの代案は難しいですね。JavaScriptがないと厳しいです。

[syosinsyaprogra]

そうですか。わかりにくいのに、ありがとうございました。