【CSS】「クラスセレクター」について解説！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「クラスセレクター」について解説します。

「クラスセレクター」って何？？

このような方が対象です。

また、下の動画でも「クラスセレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

クラスセレクターとは何か？

<div class="container"></div>

.container {
    width: 600px;
    height: 600px;
    background-color: skyblue;
}

「クラスセレクター」を使うと「特定のクラスがついたHTML要素」にスタイルを当てることができます。

クラスセレクターの使い方

「.」ドットを書いて、その後に続けてクラス名を書けばOKです！

「.」ドットの後にスペースは入れない、ということに注意してください！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#class-html

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/Class_selectors

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

「クラスセレクター」を使うと「特定のクラスがついたHTML要素」にスタイルを当てることができる。

「.」ドットを書いて、その後に続けてクラス名を書けばOK！

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「クラスセレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！