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

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

 

前回の記事では、CSSのclassセレクタ(クラスセレクタ)についてお話ししました。

 

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

 

classセレクタを使用することによって、より柔軟にスタイルを適用できるということでしたね。

 

今回は、classセレクタとよく似たidセレクタ、そして両者の違いについてご説明します。

 

Sponsored Link

 

idセレクタとは

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

 

書式

#id名 {プロパティ名: 値;}

 

ここまではclassセレクタと同じなのですが、それぞれ以下のように使い分けていきます。

 

  • classセレクタ・・1つの文書内の複数要素にスタイルを適用する場合
  • idセレクタ・・1つの文書内の1つの要素にスタイルを適用する場合

 

なぜなら、class名とid名には、以下の違いがあるからです。

 

  • class名・・1つの文書内で同じclass名を何度でも使用できる
  • id名・・1つの文書内で同じid名は一度しか使用できない

 

具体的には、id名はブログの領域を表すために、class名はそれ以外の要素を表すためにつけられます。

 

ブログは「ヘッダー」「本文」「サイドバー」「フッター」といった領域に分かれていますが、この領域を表すためにid名(#id名)をつけるということです。

 

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

 

一方で、class名は、領域をまたいだ領域内の要素を表すためにつけていきます。

 

idセレクタの指定方法

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

例えば、以下の例では、要素名には関係なく、id名「example」がついた要素にスタイルが適用されます。

 

CSSファイル

#example {
 font-size: 12px;
}

 

HTMLファイル

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

 

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

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

 

CSSファイル

p#example {
 font-size: 12px;
}

 

HTMLファイル

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

 

※1つの文書内で同じid名を重複指定できないので、要素を指定してもしなくても、id名がついた1つの要素のみ対象となります。

 

Sponsored Link

 

idセレクタはclassセレクタより優先される

idセレクタはclassセレクタより優先されます。

 

例えば、以下のように、p要素にid名とclass名をつけた場合、idセレクタ[#exampleid]のスタイルが優先されます。

 

CSSファイル

#exampleid {
 color: red;
}
#exampleclass {
 color: blue;
}

 

HTMLファイル

<p id="exampleid" class="exampleclass">#exampleidスタイルが適用されます。</p>

 

まとめ

今回は、idセレクタ、そしてclassセレクタとの違いについて見てきました。

 

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

 

というように、基本的には同じなのですが、以下の違いがあります。

 

  • classセレクタ・・1つの文書内の複数要素にスタイルを適用する場合(1つの文書内で同じclass名を何度でも使用できる)
  • idセレクタ・・1つの文書内の1つの要素(領域)にスタイルを適用する場合(1つの文書内で同じid名は一度しか使用できない)

 

そのため、id名は、文書内の領域を表す際に使用されます。

 

なんだか難しそうに聞こえるかもしれませんが、実際に手を動かしていくと、すぐに腑に落ちていきます。

 

それに、WordPressでは、一からCSSファイルを作るのではなく、テーマのCSSを変更していくので、CSSやclassセレクタ、idセレクタを押さえてカスタマイズできるようになればOKです。

 

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

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

 

 

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

 

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

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

Sponsored Link

 

コメントを残す

ページトップへ