もうすぐ夏も終わりますね。記憶にある限り人生2度目の夏風邪をひいてしましました。N.A.です。鼻づまりの中、がんばって鼻呼吸するようにしてるんですけど、気がつくと口が開いてしまいます。
「全部じゃなくってさ。この時だけスタイルを適用したいんだよ〜」ってことありませんか？
同じスタイルを特定の複数のタグに適用したい場合、クラスをつけてそのクラスにスタイルを適用するという方法が昔からある一般的な方法だと思います。
ただそれだと、スタイルを適用するためにHTMLを編集（クラスを追加）しなければならないので面倒ですよね。
そこで登場するのが擬似クラスと属性セレクタです。今回そのうちのいくつかをピックアップしてみました。
擬似クラス
:hoverなど
擬似クラスの中で多分HTMLをコーディングしたことがあるすべての人がご存知で一番使っているのが「:hover」ではないでしょうか？
aタグに「:hover」を追加すると、マウスオーバーしたときを表すセレクタとなりその場合のみのスタイルを設定できます。
よくあるのが、透明度を変更したり、テキストリンクだったら下線を表示させてたり隠したりしてリンク部分の上にマウスポインターがあることを知らせてくれますよね。
そのほかaタグには「:link(未訪問のリンク。デフォルトの状態。)」「hover(マウスオーバー)」「:active(マウスボタンを押し込んだ状態)」「:visited(一度開いたことのあるページのリンク)があります。
「:（コロン）」で
始まるのが特徴ですね。
first-child, last-child, nth-child(n)
同じ要素の中の1番目の要素、最後の要素、n番目の要素を表す
「first-child, last-child, nth-child(n) 」は、いくつかある要素の中で特定の順番の要素のみにスタイルを適用します。
first-childは1番目。last-childは最後。nth-child(n)はカッコ内のn番目の要素に適用されます。
例
li:first-child{}
li:last-child{}
li:nth-child(3){}
上の例では指定された順番、上から<li>の最初の要素、<li>の最後の要素、3番目の<li>に適用されます。
「child」ってついているのでそれ自身ではなくその中に含まれる子要素に適用されるのでは？といつも迷ってしまうんですよね。個人的に気をつけたいポイントです。
あとは:first-letterっていうのが1文字目だけにスタイルを適用できて面白い効果が得られますね。
ほかにafter擬似クラスや、before擬似クラスがありますが今回は割愛します。
属性セレクタ
特定の属性を持つ要素に適用します。属性は[]で囲みます。
a[title]{プロパティ:値}
<a href=”#” title=”“タイトル””>リンク</a>
また、jQueryのプラグインで特殊な属性を追加する場合なんかにも便利かもしれませんね。
属性セレクタの応用
属性セレクタをさらに細かく絞り込むこともできます。
要素名[属性=”属性値”] {プロパティ名:値;}
また一致だけではなく、正規表現を使って
「一部を含む」「〜で始まる」「〜で終わる」
などの条件も選べるので使い勝手が高くてありがたいです。
例）
新しいウィンドウで開くリンクに対して
a[target=“_blank”]{プロパティ名:値;}
ページ内リンク(「#」で始まるリンク)に対して
a[href^=“#”]{プロパティ名:値;}
pdfファイルのリンク(「.pdf」で終わるリンク)に対して
a[href$=“.pdf”]{プロパティ名:値;}
ワイルドカードも使えます。
例を無理やり作ると「google」を含むリンクだったら
a[href*=”google”]{プロパティ名:値;}
まとめ
しばらく使っていなかったので、よく使う:hoverはさておき、コロンとかハイフンとかどのカッコ使うのかとかが曖昧になっていたので復習の意味も込めてまとめてみました。特に属性の値でフィルタリングするのはかなり便利だと思います。
古いIEに対応していないのがボトルネックだったのですが、だんだん対応する必要がなくなってきたので今後使える機会が増えてくるでしょうね。
今回のエントリについて以下のページを参考にさせていただきました。
コメント