CSSはマークアップには欠かせない要素ですが、その中でもCSSのセレクタの知識を身につけることは非常に重要です。

CSSのセレクタには優先順位が存在し、この優先順位を理解していないとマークアップをしている際にスタイルが上手く反映できないといった問題に悩まされることになります。

CSSを適切に扱い、正確にスタイルを反映させるためにも今回はCSSのセレクタの種類と優先順位について分かりやすく解説していきます。

CSSのセレクタとは？

CSSのセレクタとは、装飾したい部分の示したものです。

CSSは以下のような書き方をします。

上記のコードはpタグの文字の大きさを示したコードになりますが、装飾したい部分を示しているpタグの箇所をセレクタと呼びます。

CSSのセレクタはHTMLのタグ要素だけでなく、class属性やid属性などいくつかの種類があり、その種類によって、優先順位も決められています。

優先順位を理解していないと、ページのデザインが崩れてしまう要因にもなるので、しっかりと抑えておきましょう。

0.1 基本的なセレクタの種類
0.2 セレクタの優先順位
0.3 !important とインラインセレクタ

1 フロントエンドを学習するならSkilled(スキルド)

基本的なセレクタの種類

CSSの必ず抑えておきたい基本的なセレクタの種類は3つあります。

タグ要素
class属性
id属性

それぞれ見ていきましょう。

タグ要素

タグ要素は<div>タグや<p>タグなどのHTMLタグのことを指し、セレクタとして指定することができます。

例:

div {
padding: 20px;
background: skyblue;
}
p {
margin-bottom: 12px;
}

class属性

HTMLタグのclass属性をセレクタとして指定できます。重複して使用することができるため、最も使用されるセレクタです。

例:

.title {
font-size: 32px;
font-weight: bold;
}

id属性

HTMLタグのid属性もセレクタとして扱えますが、ページ内で重複することができないため注意が必要です。
例:

#top {
margin-top: 30px;
margin-bottom: 120px;
}

セレクタの優先順位

CSSのセレクタの優先順位は、セレクタの種類によって決まります。

HTMLタグ < class属性 < id属性

上記の順で優先される順が決まっており、id属性が最も高く、HTMLタグのセレクタが最も低いです。
例えば、以下のようにコードを記述した場合、id属性の#topが背景色を赤に設定しているため、背景は赤色になります。

<div class="background" id="top">
   <h1>HELLO WORLD!!</h1>
</div>

<style>
    div {
        background: grey;
    }
    #top {
        background: red;
    }
    .background {
        background: blue;
    }
</style>

backgroundクラスを変更しても、id属性で背景色が設定されている場合には反映されることはありません。

!important とインラインセレクタ

基本のセレクタ以外に、!importantとインラインセレクタがあります。

!important

他のセレクタよりも最優先されるようになります。
例:

.title {
  font-size: 64px !important;
  }
  #top h1 {
  font-size: 24px;
  }

インラインセレクタ

インラインセレクタはHTMLタグ要素内にstyleを記述する方法です。この記述方法は!important の次に優先されるセレクタになります。

<h1 class="title" style="font-size: 64px;">TITLE</h1>
<style>
    .title {
        font-size: 24px;;
    }
</style>

!important とインラインセレクタの注意点

!importantとインラインセレクタは優先順位が高く便利に思われるかもしれませんが、それぞれデメリットがあります。
!importantをつけることで、自分の望むスタイルを当てることは出来ますがセレクタの優先準位を完全に無視してスタイルを適用することになるので、多用するとセレクタの優先順位が破綻し管理しづらいコードになります。
インラインセレクタについてもHTMLとCSSが入り混じったコードは非常に管理が難しいコードになります。

インラインセレクタを多用したコード

<div style="margin: 30px;">
    <h1 style="font-size: 24px; font-weight: bold;">TITLE</h1>
    <div style="padding: 20px; background: grey;">
        <h2>SKILLED 1</h2>
        <p style="font-size: 14px;">HELLO WORLD!!</p>
    </div>

    <div style="padding: 20px; background: grey;">
        <h2>SKILLED 2</h2>
        <p style="font-size: 14px;">HELLO WORLD!!</p>
    </div>
</div>

上記をclassで整理したコード

<div class="top">
    <h1 class="title">TITLE</h1>
    <div class="box">
        <h2>SKILLED 1</h2>
        <p class="text">HELLO WORLD!!</p>
    </div>

    <div class="box">
        <h2>SKILLED 2</h2>
        <p class="text">HELLO WORLD!!</p>
    </div>
</div>
<style>
    .top {
        margin: 30px;
    }
    .title {
        font-size: 24px;
        font-weight: bold;
    }
    .box {
        padding: 20px;
        background: grey;
    }
    .text {
        font-size: 14px;
    }
</style>

コードの行数はインラインセレクタを使わない方が長くなりますが、コードの見やすさや管理のしやすさはインラインスタイルを用いないほうが格段によくなります。
例えば、class定義しているboxのスタイルを変えたい場合は、スタイル内の.box部分を変えるだけで変更可能ですが、インラインスタイルの場合は `<div style=”padding: 20px; background: grey;”>` の部分を2箇所入れ替える必要があります。
読みづらいコードの中をそれぞれ変更するということは記述ミスにも繋がり、記述ミスはスタイルが崩れることを意味します。
HTMLとCSSのコードは分けて書くということはキレイなコードを書く上で非常に重要なことなので覚えておきましょう。