CSSのclassセレクタ(クラスセレクタ)とは

こんにちは、NEOです。記事をご覧いただきましてありがとうございます。

 

前回の記事では、CSSの基礎についてお話ししました。

 

CSSの基礎を押さえてブログデザインを自在にカスタマイズ!

 

ですので、今回はそれを押さえた上で、classセレクタ(クラスセレクタ)についてご説明します。

 

classセレクタを使用すると、より柔軟にスタイルを適用できるので、この機会に理解しておきましょう。

 

Sponsored Link

 

セレクタとは

CSSのセレクタとは、スタイルを適用する対象を指定するものです。

 

例えば、以下の例では、[h2][div.test]がセレクタです。

 

h2{
 font-size: 20px;
 color: red;
}
div.test{
 font-size: 20px;
 color: red;
}

 

[h2]にスタイルを適用する、[div.test]にスタイルを適用するということです。

 

classセレクタとは

CSSのセレクタのうち、classセレクタは、特定のclass名がついた要素にスタイルを適用します。

 

書式

.class名 {プロパティ名: 値;}

 

※1つの文書内に、同じclass名を持った要素は複数存在できるので、特定のclass名がついた複数の要素にスタイルを適用できます。

 

以下のように要素型セレクタ(要素にスタイルを適用)を指定した場合は、文書内の「h3要素全て」にスタイルを適用しますが、時には「h3要素のうち一部」にスタイルを適用したい場合もあるかと思います。

 

HTMLタグ{
 プロパティ名: 値;
 プロパティ名: 値;
 ・・・・
}
h3{
 color: blue;
 font-size: 12px;
}

 

そういった時にclassセレクタを使用すれば、それが可能になります。

 

Sponsored Link

 

classセレクタの指定方法

指定方法その1:要素を指定しない

例えば、以下の例では、class名「example」がついた全ての要素にスタイルが適用されます。

 

CSSファイル

.example{
 font-size: 12px;
 color: blue;
}

 

HTMLファイル

<p class="example">スタイルが適用されます。</p>
<div class="example">スタイルが適用されます。</div>

 

指定方法その2:要素を指定する

例えば、以下の例では、class名「example」がついたp要素にスタイルが適用されます。(div要素には適用されません。)

 

CSSファイル

p.example{
 font-size: 12px;
 color: blue;
}

 

HTMLファイル

<p class="example">スタイルが適用されます。</p>
<div class="example">スタイルが適用されません。</div>

 

指定方法その3:要素を指定するその2

例えば、以下の例では、class名「example1」、「example2」、または両方がついたp要素にスタイルが適用されます。

 

※class名を半角スペースで区切ることによって、複数のスタイルを適用できます。

 

CSSファイル

p.example1{
 font-size: 12px;
}
p.example2{
 color: blue;
}

 

HTMLファイル

<p class="example1">example1のスタイルが適用されます。</p>
<p class="example2">example2のスタイルが適用されます。</p>
<p class="example1 example2">両方のスタイルが適用されます。</p>

 

まとめ

今回は、CSSのclassセレクタについてお話ししました。

 

classセレクタを使用すると、より柔軟にスタイルを適用できるので、是非覚えてくださいね。

 

CSSのidセレクタとは。classセレクタとの違いは?

 

 

この記事が少しでもあなたのお役に立てれば幸いです。

 

ご不明な点などございましたら、いつでもお問い合わせくださいね。

この記事を読んだ方は、こちらも読んでいます。

Sponsored Link

 

コメントを残す

ページトップへ