javascript - jQueryを使用して：before要素を取得および変更します

Question

CSSセレクターで作成した要素を選択したい:before。

を使って試してみました$('#element:before')が、要素だけでなく要素全体を選択していたのでうまくいきませんでした:before。

サンプルコードは次のとおりです。DEMO

その例では、文字列全体ではなく、文字列「1.」のみが赤である必要があります。これを行う方法はありますか？

score 5 · Accepted Answer

JQueryは、要素に含まれていないため、：beforecontentにcssプロパティを設定できません。javascriptを使用して：beforeコンテンツの色を操作できるようにする場合は、追加のcssクラスを作成し、このクラスを追加/削除できます。

score 2 · Accepted Answer

cssで作成されたコンテンツをターゲットにすることはできません:before。ただし、データ要素をターゲットにして、それをcssのコンテンツタグに追加することはできます。これについては、この質問で受け入れられた回答を参照してください。

必要に応じて、cssを使用したスタイリングも可能です。

div:before {
    content: '1. ';
    color:red;
}

1.を赤にするだけです。

score 0 · Accepted Answer

方法はcustom properties、実際にはcss変数にすることができます。

--myColorそして、以下で宣言されているため、変数がグローバルスコープを持つ例:root：

setInterval(function() {  
  
  $(':root').css('--myColor', 'red');

}, 2000);

:root {
  
  --myColor: green;
  
  font-size: 30px;
  font-weight: bold;
}
div:before {
    content: '1. ';
    color: var(--myColor);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  test
</div>

3 に答える 3