CSSセレクタ

構文

すべてのCSSスタイルの3つのパーツから成っている： セレクタ 、 プロパティと値を返します 。すべてのCSSコードを小文字で書かれるべきであるXHTMLの書式設定ルールに沿って保持する。

CSSの構文

• セレクタ：HTMLタグのCSSルールを受信するに行くのを定義します。すべての段落を書くことができるスタイルを変更するp {property:value} 。
• プロパティ：この場合に適用するCSSスタイルです。すべての段落のように書くことができるテキストの色を変更するにはp {color:value} 。
• 値：プロパティの値を返します。すべての段落テキストを書くことができる赤にするにはp {color:red} 。

CSSのステートメントに複数のプロパティ：セミコロンで区切ることによって値のペアを持つことができます; 。

複数のプロパティ：値のペア

[プロパティ]を少なくとも1つの値を提供したいけれど、時にはより受け入れることがあります。 複数の値のいずれかスペースで区切られたこれは、すべての値がプロパティに使用されることを意味することができます。か、またはコンマですることができます分離これは、一連の値と提案されている最初に該当する1つの使用を意味します。

スペースで区切られた値

上記のCSSのステートメントは、5ピクセル幅の赤い枠線で段落をレンダリングするために、すべての3の値を使用します。

カンマで区切られた値

上記のCSS文の段落から、使用するための3フォントを示唆左から右へ。場合にはMS Pゴシックを使用するとしようとした場合でも、それは一般的なsans - serifフォントに訴えるが失敗し、ユーザーのシステム上では利用できませんVerdanaです。

複数のセレクタ

代わりに、すべてのHTMLの場合に適用するためにシューッという音タグには、同じCSSルールを書いて、 グループセレクタを一緒にし、それらをカンマで区切ることができます。このCSSのコードは、非常にコンパクト＆効率的になります。

各セレクタに同じスタイルの（悪い）

グループセレクタ（よい）

文脈セレクタ

だけの場合は、段落のセレクタにスタイルを適用すると、すべての段落の影響を受けます。どのようなご希望の場合のみ、リスト項目の中の段落を変更するか？その場合には場合、タグは特定のコンテキストで発生するのは唯一のCSSルールを適用する文脈セレクタが必要です。文脈セレクタは、それらがあなたの文書に表示される必要があるネストされた順序でのタグのリストが作成されます。

文脈セレクタ

唯一の段落の要素を上記の例で<p>リスト項目の内部<li>と赤のテキストを取得するテキストのみを強調<em> 〜で<h1>件名灰色の背景色を取得します。

コメント

場合によっては、CSSのコメントをいくつかのステートメントの隣に置くには、何をやっている説明に役立つことができます。これらのコメントは、Webブラウザによって無視されますが、まだ最終的なファイルのサイズ（とは異なり、プログラミング言語にPHPなど、ここでのコメントは、最終出力の一部ではない）を追加します。

CSSのコメント

ブラウザの互換性

現在のすべての主要なWebブラウザので、安全に使用できるセレクタの両方のタイプをサポートします。そこにすべてのInternet Explorerなどのブラウザでサポートされているいくつかのより高度なCSSセレクタされます（ここではパターンを参照してください）。彼らは、CSSのチュートリアルでは先進的なカバーされます。