CSS 选择器

CSS選択子は、HTMLドキュメント内の要素に一致するパターンです。関連するスタイルルールは、選択子パターンに一致する要素に適用されます。

選択子とは何か

選択子は、CSSにおいて最も重要な要素の一つであり、それらはウェブページ上の要素を選択して、スタイルを設定するために使用されます。選択子は複数の方法で定義できます。

一般的な選択子

一般的な選択子（*星号または星号は、ページ上の各個別の要素に一致します。ターゲット要素に他の条件がある場合、一般的な選択子を省略できます。この選択子は、要素からデフォルトのマージンやフィルルを削除して、迅速なテストを行うために通常使用されます。

*　{
　　　　margin:　0;
　　　　padding:　0;
　　}

*選択子内のスタイルルールは、ドキュメント内の各要素に適用されます。

要素種別選択子

要素種別選択子は、ドキュメントツリー内の各要素のサンプルを対応する要素種別名と一致させます。

p　{
　　　　color:　blue;
　　}

p選択子内のスタイルルールは、<p>ドキュメント内の各要素に適用され、それらの色を青色にします、どのような位置にいても。

ID選択子

ID選択子は、単一または唯一を使用した要素にスタイルルールを定義することです。

ID選択子の定義は、井号（#）に続いてID値を設定します。

#error　{
　　　　color:　red;}

このスタイルルールは、id属性が設定された要素のテキストを赤色に表示しますerror。

クラス選択子

クラス選択子は、classのいかなるHTML要素の属性。このクラスを持つすべての要素は、定義されたルールに基づいてフォーマットされます。

を用いて、.）に続いてクラス値を定義するクラス選択子を紧随して定義します。

.blue　{
　　　　color:　blue;
　　　　　　}

上記のスタイルルールは、class属性が設定されたドキュメント内の各要素のテキストを青色に表示しますblue。より具体的にする方法があります。例えば：

p.blue　{
　　　　color:　blue;
　　　　}

選択子のスタイルルールp.blueのみ<p>をclass属性が設定された要素が青色に表示されますblue、他の段落には影響ありません。

後裔選択子

ある要素が別の要素の後裔である場合に選択するために、これらの選択子を使用できます。例えば、無秩序リスト内に含まれる特定の定位点のみを定位するか、全ての定位点要素を定位するかを決めたい場合。

ul.menu　li　a　{
　　　　text-decoration:　none;
　　　　}
h1　em　{
　　　　color:　green;
　　　　}

選択子内のスタイルルールul.menu li aのみ適用<a>classを持つ無秩序リスト内のそれら、すなわちアンカー要素.menuにのみ適用され、ドキュメント内の他のリンクには影響ありません。同様に、h1 em選択子内のスタイルルールは、<em>heading内に含まれる要素<h1>。

子選択子

子選択子は、特定の要素の直接子要素として選択できる要素にのみ使用できます。子選択子は、2つ以上の選択子で構成され、選択子の間に大きくな于号（つまり>）で区切ります。例えば、これらの選択子を使用して、複数のレベルのネストリスト内のリスト要素の最初のレベルを選択できます。

ul　>　li　{
　　　　list-style:　square;
　　　　}
ul　>　li　ol　{
　　　　list-style:　none;
　　　　}

選択子内のスタイルルールul > liのみ適用<li>として<ul>要素の直接子要素であり、他のリスト要素には影響しない要素

隣接兄弟セレクタ

隣接の同級セレクタは、同級要素を選択するために使用されます。このセレクタの構文は以下のようになります：E1 + E2、其中E2はセレクタのターゲットです。

h1 + p以下の例のセレクタ<p>のみ<h1>および<p>要素がドキュメントツリーで同じ親要素を共有し、<h1>の次に<p>要素の前の要素を選択する場合<h1>タイトルの次のパラグラフのみが関連するスタイルルールを持っています。

h1　+　p　{
　　　　color:　blue;
　　　　font-size:　18px;
　　　　}
ul.task　+　p　{
　　　　color:　#f0f;
　　　　text-indent:　30px;
　　　　}

一般的な兄弟セレクタ

一般的な同級セレクタは、隣接の同級セレクタ（E1 + E2）同様ですが、より厳格ではありません。一般的な同級セレクタは二つのシンプルなセレクタで構成され、これらは波括弧（〜）文字で区切られます。以下のように書くことができます：E1〜E2、其中E2はセレクタのターゲットです。

以下の例のセレクタh1 ∼ pこの要素を選択します<p>要素の前の<h1>ドキュメントツリー内で同じ親要素を共有するすべての要素。

h1　∼　p　{
　　　　color:　blue;
　　　　font-size:　18px;
　　　　}
ul.task　∼　p　{
　　　　color:　#f0f;
　　　　text-indent:　30px;
　　　　}

属性セレクタ、ポップクラス、ポップエレメントなどの他のセレクタもあります。これらのセレクタについて、次の章で説明します。

グループ化セレクタ

スタイルシート内の複数のセレクタは通常同じスタイルルール宣言を共有しています。これらをカンマで区切られたリストとしてグループ化すると、スタイルシート内のコードを最大限に減らすことができます。また、同じスタイルルールを繰り返し宣言することを防ぎます。

h1　{
　　　　font-size:　36px;
　　　　font-weight:　normal;
　　　}
h2　{
　　　　font-size:　28px;
　　　　font-weight:　normal;
　　　}
h3　{
　　　　font-size:　22px;
　　　　font-weight:　normal;
　　　}

上の例でわかるように、同じスタイルルールfont-weight: normal;は選択が共有されていますh1、h2およびh3。したがって、カンマで区切られたリストに分けることができます。以下のように表示されます：

h1,　h2,　h3　{font-weight:　normal;}
h1　{font-size:　36px;}
h2　{font-size:　28px;}
h3　{font-size:　22px;}