CSS セレクタのいろいろ

メモ：2005-10-25 17:52:21 +0900 JST Category：html

CSSの定義は、下記書式のようにセレクタと宣言部で構成されます。

セレクタ{プロパティ:値;プロパティ:値}

セレクタは、スタイルを適用する対象を示し、{}で囲まれた範囲のプロパティと値で表現の種類を示します。

セレクタの指定方法には、さまざまな方法があります。以降、セレクタのいろいろを紹介したいと思います。

全ての要素に適用するセレクタ

全ての要素に同じスタイルを定義するには、セレクタに「*」を使用します。

*{
    margin: 0;
    padding: 0
}

HTMLで定義されている要素は、セレクタとして定義することができます。セレクタに要素名を指定し、{}の範囲にプロパティと値を記述します。

p {color: blue}

p要素内の文字は、青色で表現されます。

複数の要素(セレクタ)に同じスタイルを適用したい場合は、セレクタをカンマ(,)で区切って定義します。

h1,h2,h3 {color: blue}

例えば、段落の中でも表現を変えたい場合もあります。そんな場合は、HTML要素のclass属性を使って要素を分類します。

クラスを使ってスタイルを適用するには、「要素名.クラス名」とします。また、要素に関係なく全てのクラスに適用したい場合は、「.クラス名」とします。

クラスには、分類の意味を指定するようにしましょう。

<p>クラス属性を設定していない段落です。</p> <p class="remarks">クラスを使用するとより細かく設定できますね。</p>

p.remarks {color:blue}

クラス属性を設定していない段落です。
クラスを使用するとより細かく設定できますね。

要素に関係なく全てのクラスに適用する場合は、以下のように記述します。

.remarks {color:blue}

HTML文書内で一意とされるid属性を使って、スタイルを定義することができます。

id属性をセレクタにしてスタイルを適用するには、「要素名#クラス名」とします。

<p>クラス属性を設定していない段落です。</p> <p id="remarks">クラスを使用するとより細かく設定できますね。</p>

p#remarks {color:blue}