targetにスタイルを指定

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する 最近、:hoverや:first-lineなどを利用したCSSを書いていたのですが":target"もあるんですね。 前に書いた「動きのあるメニューをCSSだけで」はマウスカーソルを置いているときしかメニューが展開されませんでしたが、コレを使えばクリックされたメニューを開いたままにできますね。 サンプル1 逆にコレだけだと「動きのない」メニューですが、:hoverと:targetを両方使えば、マウスをポイントして開き、クリックするとピンを打つように開いたままにする、なんてこともできます。 サンプル2 蛇足ですが、サンプル2ではリンクをわかりやすくするために"親x"の部分だけAタグで挟んでいます。当然DIV全体をAで挟んで下線と文字色を変えてしまえばAタグを使っていることを意識させないようにも見せられます。 サンプル3 さらに、動きのある記号付きメニューをCSSだけでと合せれば、開いているメニューの前にピンを打った画像を置いたりすることもできちゃいますね。 また:activeを使うとマウスでクリックしている間だけ開く、なんてこともできるんですね。 全てIE6では動きませんが。