HTMLやCSSの学習を始めたばかりの初心者は**「セレクタって何？」「セレクタの種類がたくさんあって覚えきれない」**といった状況に陥りがち。
そこで今回は（初級編）として**「セレクタとは？」「まず覚えるべきセレクタの種類5つ」**をまとめてみました。
セレクタとは？
セレクタ
CSSではHTMLの要素に対して様々なスタイルを指定することができるが、その際に**「どの要素に」**を指定するためのもの。
セレクタの基本的な書き方
「セレクタ」「プロパティ」「値」の組み合わせで構成されています。
- **「プロパティ」→「何を」**を指定するところ。
- **「値」 →「どのようにするか」**を指定するところ。
- **「セレクタ」 →「どのHTMLに対してか」**を指定するところ。
基本的なCSSの記述例
とりあえず、順番に例をみていきましょうか。
これが基本中の基本の書き方。
p {
color : red;
}
上記のCSSの記述内容を分解すると、
● プロパティ：「color」の部分 →「文字色」を指定
● 値 ：「red」の部分 →「赤色」を指定
● セレクタ ：「p」の部分 →「HMTLのpタグ要素に対して」を指定
「{ } 」記号の内側で、プロパティと値を指定。
そして、{ } 記号の前に記述しているのが**「セレクタ」**。
※上記の例だと「p」がセレクタ。
セレクタの種類（基本編）
セレクタは、上記ように「pタグ」のような要素名での指定方法だけではなく、他にもたくさんの方法があります。
その中でも今回は（初級編）ということで、特に初学者向けに覚えていただきたい5つに絞って紹介します。
また、セレクタの指定には「優先順位」というものがあるので注意が必要です。
※詳しくは下記リンク参照。
CSSが効かない！？確認すべきポイント3つを解説！-優先順位とは？
要素型セレクタ
**「要素名で指定するセレクタ」**です。
【例】「p」の箇所が要素型セレクタ → 「pタグ」を指定。
「pタグの 文字色を 赤く します」
p {
color : red;
}
【例】「div」の箇所がセレクタ → divタグを指定。
「divタグの マージン上下左右を 20px とし、背景色を #CCCCCCに します」
div {
margin : 20px;
background-color : #cccccc;
}
全称セレクタ
**「すべての要素を指定するセレクタ」**です。（セレクタには「*」の記号を指定）
【例】「*」の箇所が全称セレクタ → 「全ての要素」を指定。
「全ての要素の 文字色を #223344 にします」
* {
color : #223344;
}
classセレクタ
**「特定のclass名のある要素を指定するセレクタ」**です。
【例】 「.class」の箇所がclassセレクタ → class名「sample」を持つ要素を指定。
「class名sampleを含む要素の 文字色を 青色 にします」
.sample {
color : blue;
}
idセレクタ
**「特定のid名のある要素を指定するセレクタ」**です。
【例】「#demo」の箇所がidセレクタ → id名「demo」を持つ要素を指定。
「id名demoを含む要素の 文字色を 黄色 にします」
# demo {
color : yellow;
}
擬似クラス
この擬似要素は上記4つとは少し異なっていて、「特定のある状況にある要素を指定するセレクタ」です。
例えば、マウスカーソルがホバーした時にカーソルをポインター（指差す手の形）に変える、といった使い方ですね。
ここでは6つの擬似クラスについて、例と共にご紹介します。
・要素名 :link
未訪問の状態にある場合に装飾を反映。
【例】未訪問状態のaタグに対して 文字色を 青色に します
a:link {
color : blue;
}
・要素名 :visited
**訪問済みの状態にある場合**に装飾を反映。
【例】訪問済みのaタグに対して 文字色を 緑色に します。
a:visited {
color : green;
}
・要素名 :hover
カーソルがホバーしている場合に装飾を反映。
【例】マウスカーソルがホバーしているaタグに対して カーソルを ポインター にします
（ホバー時のみ反映する）
a:hover {
cursor : pointer;
}
・要素名:active
クリック中の場合に装飾を反映。
【例】クリック中のaタグの 文字色を 赤色に します
a:active {
color : red;
}
・要素名:focus
フォーカスされている場合に装飾を反映。
【例】フォーカスされているinput要素の 背景色を 黄色に します
input:focus {
background-color : yellow;
}
・要素名:first-child
要素内の最初の要素だけに装飾を反映。
【例】div要素の中の最初の要素だけ、 文字色を 赤く します
div:first-child {
color : red;
}
擬似クラスでしていする要素名は「要素型セレクタ」だけではなく、「classセレクタ」や「idセレクタ」を指定することも可能。
まとめ
セレクタは他にもたくさんありますが、まずはご紹介した5つのマスターを目指してください。
次回では、中級編ということでさらに複雑な要素指定ができるセレクタについてご紹介いたします。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/