2014年3月12日水曜日
CSSセレクタの全てを知れば高パフォーマンスのWebサイトが作成出来るかも!?
これは常識ですが、一応念の為記載致します。
セレクタには優先順と言うのがあり、普通は後から書いた物が優先的に高いです。
ですが、ちゃんとスタイルを適応させるのにはポイントと言うのがあり、
それらを上手くコントロールする事が重要です。
本業の方は大体知っているかもしれませんが、CSS3で追加されたセレクタを含めて便利だと思うセレクタが幾つかあったのでそれらを紹介しようと思うのですが、
貴方はどの程度CSSセレクタをご存知ですか??
始めに頻繁に使う様なセレクタを説明します。
属性が指定されている要素に適応
特定の属性値を持っている要素のみに適応されるセレクタです。
要素[属性=値] ==> input[type="text"]{・・・}
上記の例だとテキストボックスのみに適応されますね。
これらは大体フォーム等の制作で大活用されるかと思います。
ボタン系に適応させるなら
input[type="submit"], input[type="reset"]{・・・}
言語に応じた疑似クラス
ページ内の言語に応じてスタイルを変更出来ます。
要素:lang(言語) ==> p:lang(ja){・・・}
日本語と英語の補足等に友好的に使えるかもしれません。
セレクタの優先順位
これは常識ですが、一応念の為記載致します。
セレクタには優先順と言うのがあり、普通は後から書いた物が優先的に高いです。
ですが、ちゃんとスタイルを適応させるのにはポイントと言うのがあり、
それらを上手くコントロールする事が重要です。
| セレクタに含まれる部分 | ポイント |
|---|---|
| ID(#○○○) | 100 |
| ID以外の属性(.○○○や[□□□=△△△]など) | 10 |
| 要素および疑似要素 | 1 |
| ユニバーサルセレクタ | 0 |
