質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.10%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,195

maguzo

score 50

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

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

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

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

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

>developer tool上
<div id="foo" class="ui checkbox">
 <input id="hoge" type="checkbox" name="ice" style="margin-left:0px;">
   <label class="label" for="hoge">
   ::before
   アイス
     ::after
   </label>
</div>
.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; 
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

 Interface CSSRuleList

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

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

 CSSStyleSheet#deleteRule

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

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

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

.ui.checkbox label:after{

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

 ::after 疑似要素

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

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

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

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

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

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

Re: maguzo さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/25 19:57

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

    色々ご助言いただき、ありがとうございました。

    キャンセル

  • 2018/03/25 21:13

    > cssにはE:checkedと言う擬似要素があり
    :checked は「疑似クラス」であり、疑似要素ではありません。
    通常のクラスはclass属性値を指定しなければ適用されませんが、疑似クラスは「一定の状態になった時に自動的に適用される疑似的なクラス」です(:checked の場合は「チェックされた状態」が適用されるので疑似クラス)
    https://triple-underscore.github.io/selectors4-ja.html#checked

    一方、::after 疑似要素は要素の代替となるものなので、「疑似要素」として扱います。
    疑似クラスは既存の要素に状態を適用しますが、疑似要素は新しく要素を生成するものです。
    しかし、DOM APIで削除(removeChild)したり、生成(createElement)する事は不可能なので、「疑似」要素なのです。
    疑似要素を直接編集する為にはCSS定義そのものを変更しなければなりません。

    キャンセル

  • 2018/03/26 07:49

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

    キャンセル

checkベストアンサー

+1

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

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

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

 labelをclickすると

とありますが、現状labelをクリックしても反応はありません。Semantic UIのコードを見ると、labelがチェックボックスの見た目すべてを担っており、inputopacity: 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'(チェックマーク)を表示する、というようになっています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/25 21:08

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

    キャンセル

  • 2018/03/25 21:30

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

    キャンセル

  • 2018/03/26 07:42

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

    キャンセル

+1

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

<input class="aftercancel" type="checkbox">
<div id="foo" class="ui checkbox">
 <input id="hoge" type="checkbox" name="ice" style="margin-left:0px;">
   <label class="label" for="hoge">アイス</label>
</div>
.aftercancel:checked+.ui.checkbox label:after{
    content:none;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/25 12: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でできれば良いと安易に考えていたのですが、あまり適切な方法ではないと調べながら考えました。
    質問の方法につきまして、改めてお詫び申し上げます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる