【初心者向け】覚えておくべきCSSセレクタ5つ！（初級編）

HTMLやCSSの学習を始められたばかりで

・セレクタって何？

・セレクタの種類がたくさんあって覚えきれない。。

といった状況に陥っていませんでしょうか？

そこで、今回はCSSの書き方について

・セレクタとは？

・まず覚えるべきセレクタの種類5つ（初級編）

をご紹介いたします。

目次 [非表示]

1 セレクタとは？
- 1.1 セレクタ
- 1.2 セレクタの基本的な書き方
2 セレクタの種類（基本編）
3 まとめ

セレクタとは？

セレクタ

CSSではHTMLの要素に対して様々なスタイルを指定することができます。

その際に「どの要素に」を、このセレクタで指定してあげることができます。

セレクタの基本的な書き方

まず、CSSの書き方についてですが、

「セレクタ」「プロパティ」「値」の組み合わせで構成されています。

・「プロパティ」→ 「何を」を指定します。
・「値」→「どのようにするか」を指定します。
・「セレクタ」→「どのHTMLに対してか」を指定します。

例を見ていきましょう。

// 基本的なCSSの記述例

p {
    color : red;
}

//上記のCSSの記述内容を分解してみましょう
// ● プロパティ：「color」→「文字色を」指定します
// ● 値：「red」→「赤色にする」を指定ます
// ● セレクタ：「p」→「HMTLのpタグ要素に対して」指定します

// 基本的なCSSの記述例

p {

color : red;

}

//上記のCSSの記述内容を分解してみましょう

// ● プロパティ：「color」→「文字色を」指定します

// ● 値：「red」→「赤色にする」を指定ます

// ● セレクタ：「p」→「HMTLのpタグ要素に対して」指定します

{ } 記号の内側で、プロパティと値を指定します。

そして、{ } 記号の前に記述しているのが「セレクタ」です。

改めて、本記事でこれからご紹介する「セレクタ」基本ルールを整理しますね。

・「HTMLのどこを装飾するか」を指定するもの
・記述する場所は、{ } 記号の前

セレクタの種類（基本編）

セレクタは、上記の例のように「pタグ」のような要素名での指定方法だけではありません。

他にもたくさんの方法があります。

その中でも今回は「初級編」ということで、セレクタの中でも特に初学者向けに覚えていただきたい5つに絞ってご紹介していきます。

また、セレクタの指定には「優先順位」というものがありますので注意が必要です。

詳しくは下記リンクを参照ください。

CSSが効かない！？確認すべきポイント3つを解説！-優先順位とは？

要素型セレクタ

「要素名で指定するセレクタ」です。

// 「p」の箇所が要素型セレクタです
// 「pタグ」を指定します
// 「pタグの 文字色を 赤く します」
p {
    color : red;
}

// 「div」の箇所がセレクタです
// divタグを指定します
// 「divタグの マージン上下左右を 20px とし、背景色を #CCCCCCに します」
div {
    margin : 20px;
    background-color : #cccccc;
}

// 「p」の箇所が要素型セレクタです

// 「pタグ」を指定します

// 「pタグの文字色を赤くします」

p {

color : red;

}

// 「div」の箇所がセレクタです

// divタグを指定します

// 「divタグのマージン上下左右を 20px とし、背景色を #CCCCCCにします」

div {

margin : 20px;

background-color : #cccccc;

}

全称セレクタ

「すべての要素を指定するセレクタ」です。

セレクタには「*」の記号を指定します。

// 「*」の箇所が全称セレクタです
// 「全ての要素」を指定します
// 「全ての要素の 文字色を #223344 にします」
* {
    color : #223344;
}

// 「*」の箇所が全称セレクタです

// 「全ての要素」を指定します

// 「全ての要素の文字色を #223344 にします」

* {

color : #223344;

}

classセレクタ

「特定のclass名のある要素を指定するセレクタ」です。

// 「.class」の箇所がclassセレクタです
// class名「sample」を持つ要素を指定します
// 「class名sampleを含む要素の 文字色を 青色 にします」
.sample {
    color : blue;
}

// 「.class」の箇所がclassセレクタです

// class名「sample」を持つ要素を指定します

// 「class名sampleを含む要素の文字色を青色にします」

.sample {

color : blue;

}

idセレクタ

「特定のid名のある要素を指定するセレクタ」です。

// 「#demo」の箇所がidセレクタです
// id名「demo」を持つ要素を指定します
// 「id名demoを含む要素の 文字色を 黄色 にします」
#demo {
    color : yellow;
}

// 「#demo」の箇所がidセレクタです

// id名「demo」を持つ要素を指定します

// 「id名demoを含む要素の文字色を黄色にします」

#demo {

color : yellow;

}

擬似クラス

この擬似要素は上記4つとは少し異なります。

「特定のある状況にある要素を指定するセレクタ」です。

例えば、マウスカーソルがホバーした時に、カーソルをポインター（指差す手の形）に変える、といった使い方ができます。

ここでは6つの擬似クラスについて、例と共にご紹介していきますね。

・要素名 :link

未訪問の状態にある場合に装飾を反映します。

// 未訪問状態のaタグに対して 文字色を 青色に します

a:link {
    color : blue;
}

// 未訪問状態のaタグに対して文字色を青色にします

a:link {

color : blue;

}

・要素名 :visited

訪問済みの状態にある場合に装飾を反映します。

// 訪問済みのaタグに対して 文字色を 緑色に します。

a:visited {
    color : green;
}

// 訪問済みのaタグに対して文字色を緑色にします。

a:visited {

color : green;

}

・要素名 :hover

カーソルがホバーしている場合に装飾を反映します。

// マウスカーソルがホバーしているaタグに対して カーソルを ポインター にします
// （ホバー時のみ反映する）

a:hover {
    cursor : pointer;
}

// マウスカーソルがホバーしているaタグに対してカーソルをポインターにします

// （ホバー時のみ反映する）

a:hover {

cursor : pointer;

}

・要素名:active

クリック中の場合に装飾を反映します。

// クリック中のaタグの 文字色を 赤色に します

a:active {
    color : red;
}

// クリック中のaタグの文字色を赤色にします

a:active {

color : red;

}

・要素名:focus

フォーカスされている場合に装飾を反映します。

// フォーカスされているinput要素の 背景色を 黄色に します

input:focus {
    background-color : yellow;
}

// フォーカスされているinput要素の背景色を黄色にします

input:focus {

background-color : yellow;

}

・要素名:first-child

要素内の最初の要素だけに装飾を反映します。

//div要素の中の最初の要素だけ、 文字色を 赤く します

div:first-child {
    color : red;
}

//div要素の中の最初の要素だけ、文字色を赤くします

div:first-child {

color : red;

}

擬似クラスでしていする要素名は、「要素型セレクタ」だけではなく

「classセレクタ」や「idセレクタ」を指定することも可能です。

まとめ

いかがでしたでしょうか？

セレクタは他にもたくさんありますが、まずはご紹介した5つのマスターを目指しましょう！

以上、CSSのセレクタについて

・セレクタとは？

・ます覚えるべきセレクタの種類5つ（初級編）

についてご紹介しました。

次回では、中級編ということでさらに複雑な要素指定ができるセレクタについてご紹介いたします。

プログラミング学習を始めたばかりの方は、CSS理解のためにぜひ参考にしてみてください。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。