質問: afterやbeforeで要素の前後に擬似要素として何かを加えることができることは 知ってはいるのですが、Jquery等で動的に擬似要素を操作するにはどのようにしたら良いか わからなかったため、ご質問させてください。 具体的に申し上げますと、 下記のようなチェックボックスをクリックするとdeveloper tool上 アイスの直後に::afterが加わり、 .ui.checkbox label:afterのcssが適用になります。 このような擬似要素について、他の要素をクリックした時に .ui.checkbox label:afterのcssを非適用にする方法は あるのでしょうか? *なぜ、チェックボックスをクリックすると .ui.checkbox label:afterのcssが適用になるのかがわかれば 判明するとも思ったのですが、この仕組みが外部のライブラリであったため、読み解くこと できずに質問させていただきました次第です。 ``` アイス >developer tool上 ::before アイス ::after ``` ``` .ui.checkbox label:after{ position: absolute; font-size: 15px; top: 0px; left: 0px; width: 15px; height: 15px; text-align: center; opacity: 0; color: rgba(0, 0, 0, 0.87); -webkit-transition: border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease; } ```
回答: > > https://jsfiddle.net/5y3npj9z/19/ > > > を見たところSemantic UIのcheckboxを使っておられるので、それについての質問ということですね。 `label:after`が適用になる、ならないというのは、チェックされる、されないということでしょうか?また、 > > labelをclickすると > > > とありますが、現状labelをクリックしても反応はありません。Semantic UIのコードを見ると、`label`がチェックボックスの見た目すべてを担っており、`input`は`opacity: 0`になっていますがクリックすることはできます。この透明のチェックボックスをクリックするという解釈でよろしいでしょうか? > > checkedではない時に > > 1) 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 ``` $(function() { $('#btn').on('click', function() { $('.ui.checkbox').checkbox('uncheck').checkbox('set disabled') }) }) ``` JSFiddle Demo > > 1) 2)はライブラリに備わっているように思われ、3)をそのまま追加するために1)2)がどこでコントロールされているかをライブラリ上探しております。 > > > それは単にcssで実装されているようです。 Semantic UI - checkbox.css - GitHub ``` /* Checked */ .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { content: '\e800'; } ``` `input`がチェックされているときのみ、`label:after`に`'\e800'`(チェックマーク)を表示する、というようになっています。