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

Question

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

解決済

回答 3

投稿 2018/03/24 22:56

評価
クリップ 0
VIEW 1,288

maguzo

score 55

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 疑似クラスを利用しているように読めました。

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

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

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

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

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

Re: maguzo さん

投稿 2018/03/24 23:26

編集 2018/03/25 18:46

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

キャンセル
2018/03/25 18:41

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

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

キャンセル
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';のように変数のような形で使用することで特定の文字列やスタイルを適用できるのであると思ったのですが、これも初めてでまだわからない仕組みであるため、調べてみようと思います。

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

教えていただき、ありがとうございます。今少しずつ読み解けてきたのですが、 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定義そのものを変更しなければなりません。

> 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上のチェックマークを表現するものであることも分かりました！
変数なんかではないのですね、、
改めて、ありがとうございました！

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

キャンセル

+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/24 23:59

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

コメントを寄せていただき、ありがとうございます。どうももともとのライブラリが.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でできれば良いと安易に考えていたのですが、あまり適切な方法ではないと調べながら考えました。質問の方法につきまして、改めてお詫び申し上げます。

キャンセル

同じタグがついた質問を見る

jQuery
CSS

score 1 · Accepted Answer · 2018-03-25T17:22

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'(チェックマーク)を表示する、というようになっています。

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

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

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

Interface CSSRuleList

CSSStyleSheet#deleteRule

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

::after 疑似要素

関連した質問

同じタグがついた質問を見る

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

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

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

Interface CSSRuleList

CSSStyleSheet#deleteRule

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

::after 疑似要素

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン