CSSのセレクタを活用しよう

cssの適用先を指定するセレクタ部分には複数の指定方法がありますが、その多くはIE6未対応であり今まで殆ど使用してませんでした。

しかし徐々にIE6を非対応に移行してきてるので、
復習を兼ねてCSS2のセレクタをまとめてみました。
また、基本的なclassセレクタ、IDセレクタ、子孫セレクタなどは割愛します。
※CSS3のセレクタは下記記事参照
CSS3のセレクタとjQueryの書き方 | Design Spice

1. CSSセレクタ ブラウザ別対応表
2. :focus疑似クラス
3. :lang疑似クラス
4. :first-child疑似クラス
5. :first-line疑似クラス
6. :first-letter疑似クラス
7. :before疑似クラス
8. :after疑似クラス
9. E[attribute]
10. E[attribute=”value”]
11. E[attribute~=”value”]
12. 子セレクタ
13. 隣接セレクタ
14. IE6でもセレクタを使いたい場合

CSSセレクタ ブラウザ別対応表

ブラウザバージョン	4.0	3.0	2.0	4.0	10.5	4.1	6	7	8
:focus	○	○	○	○	○	○	×	×	○
:lang	○	○	○	○	○	○	×	×	○
:first-child	○	○	○	○	○	○	×	△	○
:first-line	○	○	○	○	○	○	○	○	○
:first-letter	○	○	○	○	○	○	○	○	○
:before	○	○	○	○	○	○	×	×	○
:after	○	○	○	○	○	○	×	×	○
E[attribute]	○	○	○	○	○	○	×	△	△
E[attribute="value"]	○	○	△	○	○	○	×	○	○
E[attribute~="value"]	○	○	△	○	○	○	×	△	○
子セレクタ	○	○	○	○	○	○	×	○	○
隣接セレクタ	○	○	○	○	○	○	×	○	○

:focus擬似クラス

要素がフォーカスされた際のスタイルを指定します。
フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態などです。

					input:focus{ background-color:#FF9;  }
					

:lang擬似クラス

特定の言語を指定されている要素にスタイルを適用します。
言語コードには、ja（日本語）、en（英語）、fr（フランス語）、zh（中国語）などがあります。

					p:lang(en){   color:#C00; }
					

:first-child擬似クラス

ある要素内で最初に現れる子要素にスタイルを適用します。

					li:first-child{  color:#C00; }
					

:first-line擬似要素

ブロックレベル要素の最初の行にスタイルを適用します。
※インライン要素には適用できません。

					#firstLine p:first-line{    color:#C00; }
					

:first-letter擬似要素

ブロックレベル要素の最初の文字にスタイルを適用します。
※インライン要素には適用できません。

					p:first-letter{
						font-size:20px;
						color:#C00;
						font-weight:bold;
					}
					

:before擬似要素

要素の直前に内容を挿入します。
挿入内容はcontentプロパティで指定します。
文字列・引用符・カウンタ・画像・音声などを挿入することができます。

なおブロックレベルの要素に対して:before擬似要素を使った場合は、
追加される内容もブロックレベル要素となります。
イ ンライン要素に対して擬似要素を使った場合は追加される内容もインライン要素となります。

					blockquote:before{
						content:url("blockquote.gif");
					}
					

:after擬似要素

要素の直後に内容を挿入します。
挿入内容はcontentプロパティで指定します。
文字列・引用符・カウンタ・画像・音声などを挿入することができます。

なおブロックレベルの要素に対して:before擬似要素を使った場合は、
追加される内容もブロックレベル要素となります。
イ ンライン要素に対して擬似要素を使った場合は追加される内容もインライン要素となります。

					blockquote:after{
						content:url("blockquote.gif");
					}
					

E[attribute]

要素名[属性名] の形式の属性セレクタ。
特定の属性を持つ指定要素を対象にスタイルを適用します。属性値は問いません。

					a[title]{
						font-style:italic;
					}
					

E[attribute="value"]

要素名[属性名="属性値"] の形式の属性セレクタ。
特定の属性に特定の値を持つ指定要素を対象にスタイルを適用します。

					a[target="_blank"]{
						font-style:italic;
					}
					

E[attribute~="value"]

要素名[属性名~="属性値"]の形式の属性セレクタ。
指定されている属性値候補と一致した場合にスタイルを適用します。
要素名[属性名="属性値"]指定では完全一致した場合にしか適用されないのに対して、
要素名[属性名~="属性値"]では属性値候補が含まれていればスタイルが適用されます。

					strong[class~="blue"]{
						color:#009;
					}
					

子セレクタ

あるセレクタの直下の階層にある子セレクタを対象にスタイルを適用します。

					p>strong{ color:#C00; }
					

隣接セレクタ

同じ階層にある要素同士で、ある要素の直後に隣接している要素を対象にスタイルを適用することができます。

					h3 + p{   color:#C00; }
					

IE6でもセレクタを使いたい場合

jQueryを使う事でIE6などで対応してないセレクタを利用する事ができます。

CSSのみで記述

					a[target="_blank"]{
						font-style:italic;
					}
					

↓

jQueryを使用

					<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
					<script type="text/javascript">
						$(function(){
							$("a[target='_blank']").css("fontStyle","italic");
						});
					</script>
					

jQueryの詳しい使い方については下記のサイトを参照して下さい。

• jQuery 日本語リファレンス
• ノンプログラマーのためのjQuery入門