疑似クラスは例えば :active とか :hover とか :focus とかがあります。
これは要素がある状態になっている場合にだけ適用されるCSSセレクタみたいなもの
この疑似クラスをjQueryから追加する場合少しだけ工夫が要ります。
その追加テクニックについてコード例と一緒にまとめてみました。
疑似クラスはjQueryから直接指定できない
例えばCSSで訪問済みやホバー時のリンクの色を変える場合、
:visited と :hover の２つの疑似要素が使われます。
訪問済みに適用されるのが :visited 、ホバー時に適用されるのが :hover です。
それでこの２つの疑似クラスをjQueryでも使いたいとしましょう。
この時やってしまいがちなのは次のようなコードを書いてしまうこと
|
1 2 3 4 |
$(function(){ $('a:visited').css('color', 'purple'); $('a:hover').css('color', 'darkblue'); } |
訪問済みとホバー時のリンク色を変えようとしてるコードです。
一見 a:visited とか a:hover とか書いても通用しそうな気がします。
ですがjQueryでは疑似クラスそのものはサポートしてないので全く無駄です。
じゃあ疑似クラスはどうやっても指定できないのか、というとそうでもありません。
あるテクニックを使えばjQuery側でも簡単にCSSの疑似クラスが指定できます。
jQueryから疑似クラスを指定するテクニック
その方法とはstyle要素を直接作ってしまうことです。
style要素を作成してその中に疑似クラスを書いてしまえば全て解決します。
その具体的な手順とコード例は次の通り
１. まず次のようにstyle要素の中に埋め込むCSSを変数 css として作成
|
1 2 3 4 |
var css = ` a:visited{color:purple;} a:hover{color:darkblue;} `; |
訪問済み時とホバー時のリンク色を疑似クラスで返るCSSコードです。
ちなみに文字列をバッククォート（ ` ）で囲むとテンプレートリテラルになります。
疑似クラスと関係ないですが、長い文字列の場合はこっちを使う方がスマートですね。
２. そうしたら次に空のstyle要素を作成して、その中にCSSを代入
|
1 2 |
var style = $('<style>'); style.text(css); |
CSSなのでstyle要素に代入するときにtextメソッドと使っています。
３. 最後にbody要素の末尾にこのstyle要素を追加
|
1 |
$('body').append(style); |
これで訪問時とホバー時のリンク色が疑似クラスで変わるようになりました。
ただ単に style要素を作成 ⇒ CSSを追加 ⇒ HTML全体に挿入 するだけなので特殊なことは何もしてません。
ちなみに全体のコードはこんな感じ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ /** 疑似クラス用のCSSコード */ var css = ` a:visited{color:purple;} a:hover{color:darkblue;} `; /** style要素を作成してCSSを設定 */ var style = $('<style>'); style.text(css); /** style要素を全体に追加 */ $('body').append(style); }); |
もちろん :hover や :visited 以外の疑似クラスでも同じようにコードが書けます。
ここまでのまとめ
ということで簡単にここまでのまとめ
- jQueryでは直接疑似クラスは扱えない
$('a:visited') とか $('a:hover') とかの書き方はNG
- ただしstyle要素を作れば疑似クラスも指定可能
style要素を作成 ⇒ CSSを追加 ⇒ HTML全体に挿入 のような手順
jQueryで疑似クラスは使えないことに要注意です。
もしどうしても必要ならstyle要素を作って追加するしかありません。
以上jQueryで疑似クラスを扱う方法についてでした。
