ホーム(記事一覧)へ

CSSセレクタのドット(ピリオド)の意味や複数つなげる方法

CSSをみていると下記のように「.」ドットとなにか英字が含まれている文字列がありますね。

.example{
    ○○
}

「ピリオドは普通最後につけるのになぜ頭についているのか?」

CSSセレクタのドット(ピリオド)の意味や複数つなげる方法を解説します。

CSSセレクタの「.」ドットはhtmlのclass

CSSに書かれる「.」ドットはhtmlのclassを指しています。

<div class="example">html</div>
<style>
.example{
    background: red;
}
</style>

htmlのclass="○○"とCSSの.○○が一致しているとき、そのhtmlタグにCSSが効くというものです。

○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。

CSSセレクタの「#」シャープはhtmlのid

CSSに書かれる「#」シャープはhtmlのidを指しています。

<div id="example">html</div>
<style>
#example{
    background: red;
}
</style>

htmlのid="○○"とCSSの#○○が一致しているとき、そのhtmlタグにCSSが効くというものです。

○○は完全に任意です。半角英数ならOKです。頭が数字だとダメです。

class「.」とid「#」の違い

ここまでみるとclassもidも使い方が同じで何が違うのか疑問ですよね。

classは1ページ内に何度でも指定できますが、idは1ページ内に1回しか指定できません。

CSSにおける優先度が異なり、#のほうが.より優先されます。

idとclassの使い分けがわからない初心者のうちは「class」だけの指定でもいいでしょう。

そのほか細かい違いは下記記事をご覧ください。

ドットを複数つなげる方法

このドットつまりclassは複数つなげて指定することができます。

AND条件(かつ)

AND条件のときは「.example1.example2」のようにclassをくっつけて記載します。間に空白をいれません。

example1 example2
example1
example2
<div class="example1 example2">example1 example2</div>
<div class="example1">example1</div>
<div class="example2">example2</div>
<style>
.example1.example2{
    background: red;
}
</style>

上記の場合class「example1」だけ「example2」だけ指定されているhtmlにはなんのCSSも効きませんが「example1 example2」が指定されているhtmlに「.example1.example2」で指定したCSSが効きます。

htmlのclassを2個指定する際は間に空白をいれます。

OR条件(または)

OR条件のときは「.example3,.example4」のようにclassの間に「,」コンマを記載します。コンマの前後に空白をいれてもいれなくてもどちらでも大丈夫です。

example1 example2
example1
example2
<div class="example3 example4">example1 example2</div>
<div class="example3">example1</div>
<div class="example4">example2</div>
<style>
.example3,.example4{
    background: red;
}
</style>

上記の場合class「example3」だけ「example4」だけ指定されていてもCSSが効きます。

CSSセレクタを複数つなげる方法をもっと知りたい方はこちら↓

まとめ

CSSセレクタの「.」ドット「#」シャープの正体

  • 「.」ドットはclass
  • 「#」シャープはid

class「.」とid「#」の違い

  • classは1ページ内に何度でも指定できるが、idは1ページ内に1回だけ。
  • CSSにおける優先度が異なり、#のほうが.より優先される。

ドットを複数つなげる方法

  • AND条件のときは「.example1.example2」のようにclassをくっつけて記載
  • OR条件のときは「.example3,.example4」のようにclassの間に「,」コンマを記載

以上、CSSセレクタのドット(ピリオド)の意味や複数つなげる方法でした。

関連記事