CSSのセレクタについて

スタイルを適用したい要素を指定する際に用いられる「CSSセレクタ」ですが、CSSセレクタには幅広い種類があり、様々な指定方法があります。

CSSの基本書式でも少しご紹介いたしましたが、おさらいをしながら一般的によく使われるCSSセレクタを紹介します。

基本的なセレクタの種類

下記HTMLコードを参考に基本的なセレクタの記述方法を紹介します。

<h1>タイトル</h1>
<div>
  <p class="content">本文</p>
  <p id="summary">まとめ</p>
</div>

ブラウザの表示

要素の指定

HTMLタグを指定することで、装飾を施す範囲を指定します。

h1 {
  color:blue;
}

ブラウザの表示

クラス名による指定

.class名と記述することで、指定のクラスに装飾が適用されます。

.content {
  colore:blue;
}

ブラウザ表示

ID名による指定

#ID名と記述することで、指定のIDに装飾が適用されます。

#summary {
  color:blue;
}

ブラウザの表示

子孫セレクタの指定

セレクタの次にスペースを入れセレクタを指定することで、指定の親要素内のすべての子要素に装飾が適用されます。

div p {
  color:blue;
}

ブラウザの表示

複数のセレクタの指定

セレクタの次に , を入れセレクタを指定することで、複数の要素に同じ装飾が適用されます。

h1, p {
  color:blue;
}

ブラウザ表示

例題

以下の中でdivタグの中のpタグのセレクタの記述方法として正しいのはどれか

1. .div .p
2. .div p
3. div, p
4. div p

エンジニアからのアドバイス

CSSセレクタを上手く使いこなすことで重複しているCSSやクラス命名などを無くすことができます。指定したい要素をどうやったら指定できるか調べながらセレクタを覚えていきましょう。