jQueryから疑似クラスを追加するテクニックを紹介

疑似クラスは例えば :active  とか :hover  とか :focus  とかがあります。

これは要素がある状態になっている場合にだけ適用されるCSSセレクタみたいなもの

この疑似クラスをjQueryから追加する場合少しだけ工夫が要ります。

その追加テクニックについてコード例と一緒にまとめてみました。

疑似クラスはjQueryから直接指定できない

例えばCSSで訪問済みやホバー時のリンクの色を変える場合、

:visited と :hover  の2つの疑似要素が使われます。

訪問済みに適用されるのが :visited  、ホバー時に適用されるのが :hover  です。

 

それでこの2つの疑似クラスをjQueryでも使いたいとしましょう。

この時やってしまいがちなのは次のようなコードを書いてしまうこと

訪問済みとホバー時のリンク色を変えようとしてるコードです。

一見 a:visited  とか a:hover  とか書いても通用しそうな気がします。

ですがjQueryでは疑似クラスそのものはサポートしてないので全く無駄です。

 

じゃあ疑似クラスはどうやっても指定できないのか、というとそうでもありません。

あるテクニックを使えばjQuery側でも簡単にCSSの疑似クラスが指定できます。

jQueryから疑似クラスを指定するテクニック

その方法とはstyle要素を直接作ってしまうことです。

style要素を作成してその中に疑似クラスを書いてしまえば全て解決します。

その具体的な手順とコード例は次の通り

 

1. まず次のようにstyle要素の中に埋め込むCSSを変数 css  として作成

訪問済み時とホバー時のリンク色を疑似クラスで返るCSSコードです。

ちなみに文字列をバッククォート( `  )で囲むとテンプレートリテラルになります。

疑似クラスと関係ないですが、長い文字列の場合はこっちを使う方がスマートですね。

 

2. そうしたら次に空のstyle要素を作成して、その中にCSSを代入

CSSなのでstyle要素に代入するときにtextメソッドと使っています。

 

3. 最後にbody要素の末尾にこのstyle要素を追加

これで訪問時とホバー時のリンク色が疑似クラスで変わるようになりました。

ただ単に style要素を作成CSSを追加HTML全体に挿入 するだけなので特殊なことは何もしてません。

 

ちなみに全体のコードはこんな感じ

もちろん :hover  や :visited  以外の疑似クラスでも同じようにコードが書けます。

ここまでのまとめ

ということで簡単にここまでのまとめ

  • jQueryでは直接疑似クラスは扱えない
    $('a:visited')  とか $('a:hover')  とかの書き方はNG
  • ただしstyle要素を作れば疑似クラスも指定可能
    style要素を作成 ⇒ CSSを追加 ⇒ HTML全体に挿入 のような手順

jQueryで疑似クラスは使えないことに要注意です。

もしどうしても必要ならstyle要素を作って追加するしかありません。

以上jQueryで疑似クラスを扱う方法についてでした。