ＣＳＳセレクタの説明

セレクタ

CSSにおけるセレクタとは、スタイルを適用する箇所のことです。

カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。

セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。

どのようなHTML要素でもCSS1セレクターになり得ます。

セレクターは、単に特別なスタイルと結び付いた要素です。

例えば、以下ののものは、

P { text-indent: 3em }

Pです。

一つのセレクターは異なるクラスを持つことができ、かくて要素は異なったスタイルを持つことができます。

例えば、制作者は言語に応じて異なる色で表示したいと思うでしょう：

code.html { color: #191970 }
code.css { color: #4b0082 }

上の例は二つのクラス、HTMLのCODE要素に cssとhtml、を作り上げています。

CLASS属性は、HTMLで要素のクラスを示唆するのに使われ、CLASS="クラス名"を使って指定します。

例えば、

<P CLASS="warning">1つのクラスだけが1つのセレクター当たり許可されます。

例えば、code.html.proprietaryは無効です。

</p>

クラスは、伴う要素がなくても宣言されます。

例

.note { font-size: small }

このケースでは、 noteクラスは何らのかの要素と一緒に使われていません。

見え方でなく機能によってクラスに名前を付けるのが実践的です。

上の例でのnoteクラスは、smallと名付けられていますが、制作者がこのクラスのスタイルを変えることにしたらもはや文字サイズは小さくなく、意味がなくなります。

ID selectorsは、要素毎に定義する目的で一つ一つに割り当てられます。

このセレクター・タイプは、継承制限に従って限られるときだけに使用されるべきです。

IDセレクターは、名前に先行して同定子"#"を使って指定します。

例えば、以下のように指定され得ます：

#svp94O { text-indent: 3em }

これは、HTML内では ID属性によって参照されます：

<PID=svp94O>Text indented 3em</P>

文脈セレクターは、空白スペースで区切られた二つ以上の単純なセレクターの単なる文字列です。

これらのセレクターは、普通のプロパティーに割り振れられ、カスケード序列規則に従って単純なセレクターより優先されます。

例えば、以下の文脈セレクター

P EM { background: yellow }

は、 P EMです。

この規則によれば段落
内の強調文は背景が黄色です；見出しの強調文は影響されません。