Perl Web開発者のHTML・CSS入門

クラスセレクタ - CSS入門【CSS3対応】

クラスセレクタは、スタイルシート(CSS)を適用する要素のクラスを指定するためのものです。

クラスセレクタは「.」で始め、適用したい要素のクラス名を指定します。「.menu」の部分がクラスセレクタです。

.menu {
  color:red;
}

クラスセレクタを使ってみましょう。

<style>
.menu {
  color:red;
}
</style>

<div class="menu">
  焼肉
</div>

クラスセレクタと要素セレクタの組み合わせ

クラスセレクタと要素セレクタを組み合わせることもできます。

<style>
  div.menu {
    color:red;
  }
</style>

<div class="menu">
  焼肉
</div>

クラスセレクタとIDセレクタのどちらを使うべきですか?

基本的には、スタイルシート(CSS)の中では、クラスセレクタのみを使うのが、お勧めです。

IDセレクタは、要素が一意である必要があるのに対し、クラスセレクタは、同じクラス名を持つ複数の要素に対しても適用でき、柔軟です。