クラスセレクタの記述方法と使い方【CSSスタイルシート】

クラスセレクタ

要素名.クラス名{宣言}
(この要素のこのクラス名が対象)

.クラス名{宣言}
(このクラス名が付いている全ての要素が対象)


クラスセレクタclass属性で与えられたクラス名セレクタとして使用します。注意しなければならないのはクラス名の前に「.」ドットを付けないといけないという点です。


本来クラスセレクタは頭に「*」アスタリスクを付けますが、省略することが可能なので、省略して使う場合が殆どです。



class属性で名前を付けた要素が対象になるので書き方には次の2種類があります。class属性(HTMLタグ)についての解説はこちら

1つ目は、あるクラス名を付けた全ての要素が対象になる場合です。

(例)p要素とdiv要素にクラス名「test」を付けた
<p class="test"></p>
<div class="test"></div>

CSSの記述は『.test{宣言}』となります。
この場合testというクラス名を付けられたp要素とdiv要素が対象になります。



2つ目はクラス名を付けた特定の要素が対象になる場合です。
上に同じく

(例)p要素とdiv要素にクラス名「test」を付けた
<p class="test"></p>
<p></p>
<div class="test"></div>

このとき、クラス名testと付けたp要素だけを対象にしたければ、CSSの記述は次のようになります。

p.test{宣言}

「この場合p要素の中のクラス名testが対象」ということになります。クラス名を付けていないp要素やクラス名testを付けたdiv要素は対象外になります。

より細かく設定するときは、このように記述することが出来ます。





カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。