CSS3の:target擬似クラスのような表現をjQueryで実現する方法のメモ

記事内目次

1. WordPressテーマと:target擬似クラス
2. :target擬似クラスについての解説リンクとブラウザ対応状況

WordPressテーマと:target擬似クラス

2013年8月27日現在は、このweblogにはTwenty Thirteenテーマをそのまま使っています。

大きな記事ではセクションにidを振ってフラグメント参照を行っているのですが、:target擬似クラスのような挙動で枠囲いが表示されるなあと思い、テーマ内のCSSソースを覗いてみたら、:targetの記述は特にありませんでした。

ブラウザのJavaScriptを切ったらこの枠囲いの挙動も発生しないし、:target擬似クラスはInternet Explorerやバージョン8以前のOperaなどで対応していないから、CSSではなくスクリプトで:targetっぽいことをやる手法もあるのか、と思い検索してみたら、jQueryでCSS3のセレクタを実現する手法があることを知りました。

私はスクリプト関連はほとんど知識を持っておらず、なるほどなあと思ったので記録しておきます。

↑ 記事内目次にもどる

:target擬似クラスについての解説リンクとブラウザ対応状況

:target擬似クラスとは何ぞや、という方はMDNによる解説や、拙著「実践 Web Standards Design」（電子書籍版 | 紙書籍版）のフラグメント参照の解説および書籍発売時の短期連載 第6回のCSS3のセレクタを使用してみようなどを参照してください。

そして、この記事を書く際にCSS3 Selectors Testの検証結果をまとめたCSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧（2009-03-09 現在）を久しぶりに見返し、そろそろ更新しないとなあ、ということに気付いたのでそのうちやります。

↑ 記事内目次にもどる