擬似要素を動的にJqueryで非適用にする方法

afterやbeforeで要素の前後に擬似要素として何かを加えることができることは
知ってはいるのですが、Jquery等で動的に擬似要素を操作するにはどのようにしたら良いか
わからなかったため、ご質問させてください。

具体的に申し上げますと、
下記のようなチェックボックスをクリックするとdeveloper tool上
アイスの直後に::afterが加わり、
.ui.checkbox label:afterのcssが適用になります。

このような擬似要素について、他の要素をクリックした時に
.ui.checkbox label:afterのcssを非適用にする方法は
あるのでしょうか？

*なぜ、チェックボックスをクリックすると
.ui.checkbox label:afterのcssが適用になるのかがわかれば
判明するとも思ったのですが、この仕組みが外部のライブラリであったため、読み解くこと
できずに質問させていただきました次第です。

HTML
1<div id="foo" class="ui checkbox">
2　<input id="hoge" type="checkbox" name="ice" style="margin-left:0px;">
3　<label class="label" for="hoge">アイス</label>
4</div>
5
6>developer tool上
7<div id="foo" class="ui checkbox">
8　<input id="hoge" type="checkbox" name="ice" style="margin-left:0px;">
9　　　<label class="label" for="hoge">
10　　　::before
11　　　アイス
12     ::after
13　　　</label>
14</div>

CSS
1.ui.checkbox label:after{
2    position: absolute;
3    font-size: 15px;
4    top: 0px;
5    left: 0px;
6    width: 15px;
7    height: 15px;
8    text-align: center;
9     opacity: 0;
10    color: rgba(0, 0, 0, 0.87);
11    -webkit-transition: border 0.1s ease, opacity 0.1s ease, 
12　　　box-shadow 0.1s ease, -webkit-transform 0.1s ease; 
13}

行動規範の内容に同意します

回答3件

Interface CSSRuleList

CSSRuleList Interface Object を操作する jQuery API は存在しません。
CSSOM 仕様の範疇で参照して下さい。

JavaScript
1document.styleSheets[0].cssRules[0].style.display

CSSStyleSheet#deleteRule

チェックボックスのオン/オフ

*なぜ、チェックボックスをクリックすると
.ui.checkbox label:afterのcssが適用になるのかがわかれば

:checked 疑似クラスで制御する方法が考えられますが、:has() の実装が整っていない為にCSS制御を諦め、JavaScriptで制御する方法に切り替えたのでしょう。

CSS
1.ui.checkbox label:after{

関わっているCSSが上記だけならば、当該セレクタの成立/不成立が適用/未適用のトリガーとなっているはずです。
例えば、チェックボックスのオン/オフに連動して、動的に .checkbox の付け外しが発生しているはずなので、それに倣えば良いでしょう。
そうでなければ、他のスタイルが関わっている可能性を疑ってください。

::after 疑似要素

https://jsfiddle.net/5y3npj9z/19/

Chrome Developer Tools で確認したところでは、:checked 疑似クラスを利用しているように読めました。

https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/checkbox.min.css

CSS
1ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after {
2    content: '\e800';
3}

もし可能であればなのですが、このようなケースで探り方のコツを少しだけ具体的に教えていただけますでしょうか。

確認手順は次の流れです。

[Elements] タブのDOMツリー上で動的に追加された :after をクリック
[Styles] タブで当該スタイルを確認する

Re: maguzo さん

投稿2018/03/24 14:26

編集2018/03/25 09:46

think49

総合スコア18164

maguzo

2018/03/25 03:39

think49様ご丁寧に解説をいただきありがとうございます。 CSSRuleList Interface ObjectをJquery(JavaScript)で操作することができないことを読みながらも知ることができました。ラベルをクリック(toggle)するとchekbox:afterがつけ外され、適用になっているように思えるのですが、どうしてもその該当箇所を探すことができません。。他のスタイルが影響していないようにも見えるのですが、もし可能であればなのですが、このようなケースで探り方のコツを少しだけ具体的に教えていただけますでしょうか。 https://jsfiddle.net/5y3npj9z/19/ ⬆︎disableのclassが追加になった際にチェックボックスをcssを解除したいというのが本来の目的になります。もちろん、見えているチェックボックスはinputタグ本来のチェックボックスではなくcss上、視覚的に見えているデザイン上のチェックボックスですので、click時にinput要素のcheckの状態を監視して、disabledの時にはcheckedをfalseにして、解除するようにしております。

think49

2018/03/25 09:41

To: maguzo さん > https://jsfiddle.net/5y3npj9z/19/ 見るべきスタイルが別にあるように読めます。親記事に「::after 疑似要素」の節を追記しました。

maguzo

2018/03/25 10:57

教えていただき、ありがとうございます。今少しずつ読み解けてきたのですが、 cssにはE:checkedと言う擬似要素があり、input要素でラジオボタンやチェックボックスにおいて、チェックされている状態の時に適用される特別な擬似要素があり、特にJavascriptを使わずにCSSだけでかような処理ができることを初めて知りました。また、〜（波線：チルダ？）により、同じ要素内に属する後続のすべての指定要素に適用されるセレクタ（間接セレクタ）がある。(こんなセレクタがあることもお恥ずかしながら初めて知りました。。。。) content: '\e800';の意味がわからなかったのですが、おそらく前後のcssに font-face { font-family: 'Checkbox'; src: url(data:xxxxxxxx のような記載があるので、cssにも外部参照で、 content: '\e800';のように変数のような形で使用することで特定の文字列やスタイルを適用できるのであると思ったのですが、これも初めてでまだわからない仕組みであるため、調べてみようと思います。色々ご助言いただき、ありがとうございました。

think49

2018/03/25 12:13

> cssにはE:checkedと言う擬似要素があり :checked は「疑似クラス」であり、疑似要素ではありません。通常のクラスはclass属性値を指定しなければ適用されませんが、疑似クラスは「一定の状態になった時に自動的に適用される疑似的なクラス」です(:checked の場合は「チェックされた状態」が適用されるので疑似クラス) https://triple-underscore.github.io/selectors4-ja.html#checked 一方、::after 疑似要素は要素の代替となるものなので、「疑似要素」として扱います。疑似クラスは既存の要素に状態を適用しますが、疑似要素は新しく要素を生成するものです。しかし、DOM APIで削除(removeChild)したり、生成(createElement)する事は不可能なので、「疑似」要素なのです。疑似要素を直接編集する為にはCSS定義そのものを変更しなければなりません。

maguzo

2018/03/25 22:49

なるほど、分かりやすいサイトまで教えていただきありがとうございます。擬似クラスと呼ばれるものはchecked以外にもこんなにたくさんあるのですね。これまで:first-child を使ったことはあったのですが、これも擬似クラスの一つだったのですね。また、擬似要素との違いについても大変勉強になりました。加えて、 '\e800';が調べていく中で、utf-8上のチェックマークを表現するものであることも分かりました！変数なんかではないのですね、、改めて、ありがとうございました！

行動規範の内容に同意します

ベストアンサー

https://jsfiddle.net/5y3npj9z/19/

を見たところSemantic UIのcheckboxを使っておられるので、それについての質問ということですね。

label:afterが適用になる、ならないというのは、チェックされる、されないということでしょうか？また、

labelをclickすると

とありますが、現状labelをクリックしても反応はありません。Semantic UIのコードを見ると、labelがチェックボックスの見た目すべてを担っており、inputはopacity: 0になっていますがクリックすることはできます。この透明のチェックボックスをクリックするという解釈でよろしいでしょうか？

checkedではない時に

labelをclickすると➡︎label:afterが適用になる

checkedである時に
2) labelをclickすると➡︎label:afterが非適用になる
3) btnをclickすると➡︎全体がdisabledになり、label:afterが非適用になる

というのは

チェックされていないときクリックするとチェックされる
チェックされているときクリックするとチェックが消える
#btnをクリックするとチェックボックスが操作不能になり、チェックが消える

という解釈でよろしいでしょうか？

それなら、追加するコードとしては、#btnをクリックしたときにチェックボックスをuncheck、disableするということになりますが、CSSを操作するのではなくSemantic UIの機能を使ってチェックボックスの状態を変更すればいいのではないかと思います。

公式docsを見ればやり方が書いてあります。

Checkbox - Usage - Semantic UI

js
1$(function() {
2  $('#btn').on('click', function() {
3    	$('.ui.checkbox').checkbox('uncheck').checkbox('set disabled')
4  })
5})

JSFiddle Demo

2)はライブラリに備わっているように思われ、3)をそのまま追加するために1)2)がどこでコントロールされているかをライブラリ上探しております。

それは単にcssで実装されているようです。

Semantic UI - checkbox.css - GitHub

js
1/* Checked */
2.ui.checkbox input:checked ~ .box:after,
3.ui.checkbox input:checked ~ label:after {
4  content: '\e800';
5}

inputがチェックされているときのみ、label:afterに'\e800'(チェックマーク)を表示する、というようになっています。

投稿2018/03/25 08:22

karamarimo

総合スコア2551

maguzo

2018/03/25 12:08

ありがとうございます。ライブラリの仕様の読み込みが足りませんでした。このようなケースだけでなく、様々な場合に対応するコードが載っていました。教えていただき、誠にありがとうございます。無事解決いたしました。こちらのサイトを見つけれてよかったです！

karamarimo

2018/03/25 12:30

一般的に、ライブラリを使うときはまず公式のドキュメンテーションを見るべきだと思います。

maguzo

2018/03/25 22:42

承知をいたしました。次回より、今後今回の経験を活かしてまいりたいと思います。

行動規範の内容に同意します

基本的に疑似要素はcssでしかほぼ操作できないので
cssを上書きしてcontent:none;でも入れればどうです？cssの優先レベルが不明なため未検証ですが。

html
1<input class="aftercancel" type="checkbox">
2<div id="foo" class="ui checkbox">
3　<input id="hoge" type="checkbox" name="ice" style="margin-left:0px;">
4　　　<label class="label" for="hoge">アイス</label>
5</div>

css
1.aftercancel:checked+.ui.checkbox label:after{
2    content:none;
3}

投稿2018/03/24 14:59

sousuke

総合スコア3828

maguzo

2018/03/25 03:51

コメントを寄せていただき、ありがとうございます。どうももともとのライブラリが.labelをクリックするとtoggleでcssを適用、非適用させているようでして、一度、contentをnoneにして見るとその後の動作がうまく処理できなくなってしまいました。初心者のため、上手に説明できなくて本当に申し訳ないのですが、以下のようなものを実装したいと考えておりました。 checkedではない時に 1) labelをclickすると➡︎label:afterが適用になる checkedである時に　2) labelをclickすると➡︎label:afterが非適用になる 3) btnをclickすると➡︎全体がdisabledになり、label:afterが非適用になる 1) 2)はライブラリに備わっているように思われ、3)をそのまま追加するために1)2)がどこでコントロールされているかをライブラリ上探しております。なぜならクリックされた時に解除されるCSSについて、同様にdisabledになった時にも適用にすれば、もっともシンプルに達成できると考えたためです。 https://jsfiddle.net/5y3npj9z/19/ もともとの質問させていただいた時には、単純にライブラリは無視をして、追加で作成したbtnをクリックして、disabledになった時に、label::afterを削除するようなことがjqueryでできれば良いと安易に考えていたのですが、あまり適切な方法ではないと調べながら考えました。質問の方法につきまして、改めてお詫び申し上げます。

行動規範の内容に同意します

あなたの回答