CSSセレクタとは？よく使うセレクタやタグの指定方法をわかりやすく解説！

セレクタとはCSSの基本構文の中で、どこにスタイルを当てるかを指定する部分を指します。

セレクタ{
　プロパティ：  値;
}

セレクタにはpやdivといったタグ名のほか、自分で付与したclassやid名も指定することができます。セレクタで指定した要素にのみ、{}の中に書いたスタイルが適用されます。
セレクタの指定方法をマスターすると、具体的に「あの要素だけに指定する」ことが容易にできるようになります。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSにおけるセレクタへの指定方法

セレクタやタグにCSSを適用する場合、主に以下の方法があります。よく使う方法を10個ピックアップしました。

• タグ自体にスタイルを適用する
• classとidを指定する
• 複数の要素を指定する
• 特定の子要素に対してのみ指定する
• +や~で同階層の要素を絞り込んで指定する
• 子要素を > で絞り込んで指定する
• n番目の要素を指定する
• 並列の最初または最後の要素にのみ指定する
• 特定の要素だけを指定しない
• 全ての要素を指定する

タグ自体にスタイルを適用する

セレクタの基本的な使い方、タグ自体にスタイルを指定する記述を見てみましょう。

記述の例

<div>divタグの要素を指定します！</div>

div {
  color: red;
  font-size: 24px;
}

出力結果

classとidを指定する

これも基本的な使い方です。

タグにclassやidを付与し、セレクタで指定することで、classやidが付与されている要素にのみスタイルを適用することができます。

かめるん先生

基本的にはクラスセレクタを使用して書くといいと思います！

記述の例

<div class="element">divタグの要素を指定します！</div>
<div id="element-id">divタグの要素を指定します！</div>

.element {
  color: red;
  font-size: 24px;
}
#element-id {
  color: blue;
  font-size: 24px;
}

出力結果

複数の要素を指定する

複数の要素に同じスタイルを適用したい場合は、「 , 」（カンマ）で区切ることでセレクタを複数つけることができます。

記述の例

<div class="element">divタグの要素を指定します！</div>
<div class="element2">二つ目のdivタグの要素を指定します！</div>

.element, .element2 {
  color: red;
  font-size: 24px;
}

出力結果

かめるん先生

半角スペースがないと、「両方のクラスを持つ」という別の指定の方法になってしまうので、注意しましょう！

<div class="element">
  <p>divタグの中のpタグに指定します</p>
　<span>divタグの中のspanタグには適用されません</span>
</div>

.element p {
  color: red;
  font-size: 24px;
}

出力結果

+や~で同階層の要素を絞り込んで指定する

• +でセレクタを指定：同階層のすぐ後ろの要素のみ
• ~でセレクタを指定：同階層の後ろに並ぶ要素

「+」を使った記述の例

<div class="element">divタグの要素を指定します！</div>
<div>この要素を赤くします！</div>
<div>divタグの要素を指定します！</div>
<div>divタグの要素を指定します！</div>

.element + div {
  color: red;
  font-size: 24px;
}

かめるん先生

上記のことを専門用語で「隣接セレクタ」と言ったりしますね！

<div class="element">divタグの要素を指定します！</div>
<div>この要素を赤くします！</div>
<div>この要素を赤くします！</div>
<div>この要素を赤くします！</div>

.element ~ div {
  color: red;
  font-size: 24px;
}

.elementクラスと同階層の後ろに並ぶdivタグにスタイルが適用されました。

かめるん先生

上記は専門用語で、「後続兄弟結合子」といいます！

かめるん先生

専門用語は覚えておく必要はありませんが、知っておくと調べるときに意図した記事に出会いやすくなりますので、余裕のある方はぜひ知っておきましょう！

適用されない記述の例

+や~は同階層にしか適用されないため、階層が違うセレクタには指定されません。例えば以下の例では、.elementクラスのdivタグと階層が異なるため、スタイルが適用されません。

<div>
  <div class="element">divタグの要素を指定します！</div>
  <div>この要素を赤くします！</div>
  <div>この要素を赤くします！</div>
</div>
<div>階層が違うdivタグです！</div>

.element ~ div {
  color: red;
  font-size: 24px;
}

出力結果

子要素を >で絞り込んで指定する

特定の親要素内にある特定の小要素のみにスタイルを適用する場合は、親要素 > 子要素 のように「>」を使って指定できます。

記述の例

<div class="element">
  <p>子要素のpタグです！</p>
  <div>子要素のdivタグです！</div>
</div>

.element > p {
  color: red;
  font-size: 24px;
}

出力結果

並列の最初または最後の要素のみ指定する

最初の要素にのみ指定する

記述の例

 <ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
  </ul>

li:first-child {
  font-size: 24px;
  color: red;
}

出力結果

:first-childとしたことで、リストの最初の要素のみスタイルが適用されました。

最後の要素にのみ指定する

また、タグ名:last-childとすることで、並列している最後の要素にのみスタイルが適用されます。

記述の例

<ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
</ul>

li:last-child {
  font-size: 24px;
  color: red;
}

出力結果

:last-childとしたことで、リストの最後の要素のみスタイルが適用されました。

n番目を指定する

nを使用して、並列している特定のn番目の要素だけにスタイルを適用することができます。

特定のn番目の要素を指定する

特定のn番目の要素だけを指定する場合は、タグ名:nth-child(n)のように指定します。nには1, 2,など整数値が入ります。

記述の例

　<ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
  </ul>

li:nth-child(2) {
  font-size: 24px;
  color: red;
}

出力結果

li:nth-child(2) としたことで、2番目の要素にのみスタイルが指定されました。

並列の偶数番目を指定する

並列している要素の偶数番目だけ指定したい場合は、タグ名:nth-child(2n) または nth-child(even) とします。

記述の例

　<ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
  </ul>

li:nth-child(2n) {
  font-size: 24px;
  color: red;
}

/* または */

li:nth-child(even) {
  font-size: 24px;
  color: red;
}

出力結果

偶数番目のみ指定されました。nth-childの(2n)のnに0,1,2,3...と入っていき、

• 2×0 = 0番目
• 2×1 = 2番目
• 2×2 = 4番目
• 2×3 = 6番目

が指定されることになります。

かめるん先生

「even」と「odd」は区別がつきにくいところですが、文字数で覚えると覚えやすいですよ！
「even=4文字→偶数番目」
「odd=3文字→奇数番目」

並列の奇数番目を指定する

セレクタの奇数番目のみを指定したい場合は、タグ名:nth-child(2n+1) または nth-child(odd)と指定します。

記述の例

　<ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
  </ul>

li:nth-child(2n + 1) {
  font-size: 24px;
  color: red;
}

/* または */

li:nth-child(odd) {
  font-size: 24px;
  color: red;
}

出力結果

奇数番目のみに指定されました。nth-child(2n+1) の n に0,1,2,3...と入っていき、

• 2×0 + 1 = 1番目
• 2×1 + 1 = 3番目
• 2×2 + 1 = 5番目
• 2×3 + 1 = 7番目

が指定されることになります。

特定の要素だけを指定しない

特定の要素を除いてスタイルを指定する場合は、タグ名:not(指定したくない要素)と書きます。

以下は、3番目のli要素にのみスタイルを指定しない例です。

記述の例

  <ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
    <li>4番目</li>
  </ul>

li:not(:nth-child(3)) {
  font-size: 24px;
  color: red;
}

出力結果

3番目以外のセレクタにスタイルが適用されています。

かめるん先生

こちらのnotと:first-childなどを合わせて、「最初の要素以外に」という指定の仕方はよく使いますね！

全ての要素を指定

全ての要素に対してスタイルを適用させる場合は「*（アスタリスク）」を使います。

記述の例

<div class="element">
  <p>divタグの中の要素を全て指定します</p>
  <span>divタグの中の要素を全て指定します</span>
  <div>divタグの中の要素を全て指定します</div>
</div>

.element * {
  color: red;
}

出力結果

まとめ

紹介したセレクタの指定方法10個を表にまとめました。最後に確認してみましょう。

タグ名 {
  スタイル
}

クラス名またはid名 {
　スタイル
}

タグ名, タグ名{
　スタイル
}

親要素 子要素 {
　スタイル
}

タグ名 + タグ名 {
　スタイル
}

タグ名 ~ タグ名{
　スタイル
}

タグ名 > タグ名 {
　スタイル
}

/* n番目だけ指定する */
タグ名 :nth-child(n) {
　スタイル
}

/* 偶数番目だけ指定する */
タグ名 :nth-child(2n または even) {
　スタイル
}

/* 奇数番目だけ指定する */
タグ名 :nth-child(2n+1 または odd) {
　スタイル
}

/* 最初の要素だけ指定する */
タグ名 :first-child {
　スタイル
}

/* 最後の要素だけ指定する */
タグ名 :last-child {
　スタイル
}

タグ名 :not(指定したくない要素) {
　スタイル
}

タグ名 * {
　スタイル
}

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー