CSSを極めるにあたってセレクタの指定方法を熟知するのは必須です。セレクタの指定方法とCSSプロパティはブラウザの進化とともに増えており、昔はJavaScriptで制御していたことがCSSで実現できるようになったものもあります。

セレクタの基本的なことから、あまり使う機会はないけど知っておくと効率が上がるセレクタの指定方法があるのでぜひ覚えましょう。

なお、PC／スマホのブラウザのバージョンで使えなかったりする時期がありますが、最近はメジャーなブラウザであれば基本的に動作します。旧OSのブラウザ（特にIE）は使えないものが多くあるので注意してください。

セレクタとは

CSSを反映させるターゲットを指定する記述箇所をセレクタと呼びます。そしてこのセレクタには独自の名称をつけることができます。独自の名称を付けたい場合にはHTMLタグの内部に「id="ID名"」と「class="CLASS名"」を記載できます。CLASS名のみ「class="fruit ringo banana"」のように複数記載することが可能です

セレクタ{プロパティ:値}

p{font-size:10px;}
p#fruit{background:white;}
p.ringo{color:red;}

セレクタの書き方の種類

結構色々あります。

タイプセレクタの書き方

これが基本的な書き方になります。ひとつの要素を指定する場合に使います。

p{
	font-size:100px;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

複数セレクタ

これも一般的によく使われます。<h1>や<p>など複数のセレクタへ同じCSSを当てられます。クラス名なども複数使えます。
”,”で要素同士を区切ります。

h5,
p{
	font-size:10px;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

子孫セレクタ

これも一般的によく使われます。”セレクタ セレクタ”と半角スペースで区切ることでセレクタの中のセレクタと指定できます。「子孫」と名付けられている通り、グループ内の全ての指定セレクタがCSSの対象になります。例えば下記のように「.box p{}」と指定した場合は .box > p > p > p > p … と .boxセレクタ の中の全ての<p>タグがCSSの対象になります。

.box p{
	color:red;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

子セレクタ

セレクタの直下、いわゆる子セレクタだけに反映されます。”セレクタ > セレクタ”と区切ります。孫レベルの階層まで入れ子になっているとCSSの影響を受けません。慣れないと使いにくいかもしれませんが、意外とよく使うので早めに慣れましょう。

.box > p{
	color:red;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

隣接セレクタ

要素の直後に記述されたセレクタに指定できます。”セレクタ + セレクタ”とプラスでセレクタを繋ぎます。特定のセレクタの次にくる要素のCSSを変更したい場合に指定します。

利用する機会は少ないかもしれませんが不意なコーディングで必要なことがあります。

h3 + p{
  color:red;
  text-indent:1em;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

ユニバーサルセレクタ

HTMLタグ全部のセレクタを指定できます。”*（アスタリスク）”と記述します。子孫セレクタで指定もできます。全体に指定するものなので初期設定として指定することが多いです。コーディングの途中で使うことはほぼありません。

*{
    color:red;
}
div *{
    font-weight:bold;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

CLASSセレクタ

CLASS名のついたセレクタを指定できます。HTMLタグに書かれた「class="CLASS名"」をCSSに”.CLASS名”と指定します。

記述方法は２つあり、
.クラス名｛｝
HTMLタグ.クラス名｛｝
と記述できます。

.color-red{
    color:red;
}

span.color-red{
    font-weight:bold;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

【余談】同一のCLASS名はページ上にいくつあってもOKです。しかし同名のCLASS名ばかり使っていると後々に混同してコーディングしにくいためユニークなCLASS名と汎用CLASS名を決めておくと良いでしょう。

例えばデザインが固定のカテゴリーリストなら.global-categoryListとし、よくコーディング中に出てくるリストなら.listなど工夫します。

IDセレクタ

ID名のついたセレクタを指定できます。HTMLタグに書かれた「id="ID名"」をCSSに”.ID名”と指定します。

記述方法は２つあり、
.ID名｛｝
HTMLタグ.ID名｛｝
と記述できます。

#box-a{
    color:red;
}

div#box-b{
    color:blue;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

【余談】構文ルールとしてID名はページ内で１つだけのユニークなセレクタ名である必要があります。複数あっても見た目上は問題がありませんがJavaScriptなどで思わぬ挙動になることがあります。またID名はページ内アンカーリンクの座標にもなるため、これも同様に複数書いてあると思わぬ挙動になります。

複合セレクタ名（名称わからない）

同一ダグのID名およびCLASS名を複数指定してCSSを当てられます。”セレクタ名セレクタ名”と名称の間に何も入れずに指定します。

これを利用することで同じデザインが並ぶ一部のHTMLタグにのみCSSを当てることができます。例えば.item名を持つタグの.white名がついたタグだけ文字色を白に変えたりできます。別に文字色を変えるだけならこのセレクタの指定方法をとる必要はありませんが、JavaScriptでボタンが押された時に.activeを入れて.item.activeを取得したりなど様々なシーンで活躍します。

本来はそれぞれ独立しているCSSですが、特定のセレクタ名を組み合わせたときだけ特殊なCSSを当てることが可能です。

文字では説明しづらいですがサンプルを見ればわかると思います。

.item{
    background:gray;
}

.white{
    color:white;
}

.blue{
    background:blue;
}

.white.blue{
    color:black;
    background:orange;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

下記のように何個も連続してつなげて指定することができます。

.item.item-fruit.bg-red{プロパティ:値}

擬似クラス

特定の条件の要素へスタイルを反映させます。例えばリンクのマウスホバー時の動きを変えたいときに「a:hover」と記述するとCSSの調整ができます。”セレクタ:擬似クラス”と:をくっつけて指定します。

この擬似クラスはいくつかの種類があります。

よく使われる擬似クラスの一覧

擬似セレクタの複数指定

一つの要素に複数の擬似クラスを指定できます。
例えば「リスト一つ目をマウスホバーする」などできます。
”セレクタ:擬似クラス:擬似クラス”と続けて書くだけです。

ul li:first-child:hover{
    color:red;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

属性セレクタ

要素に特定の属性が記述されている場合に利用できます。”セレクタ[属性]”のように[]で囲んで指定します。
この[属性]は画像のaltやtitle、HTMLタグのclass名など＜タグ ＊＊＊="" ＊＊＊=""＞のようにタグ内に記述できるものを指します。

よく使われるのはフォームタグのCSS調整です。

input[type="text"]{
    border:2px solid blue;
}
input[type="email"]{
    border:2px solid red;
}
p[class]{
    color:red;
}

See the Pen
Untitled by pecoegg (@pecoegg)
on CodePen.dark

指定の構文はいくつかの種類がある

最後に

このようにセレクタの書き方は数多くあります。これらのセレクタ指定を組み合わせることで複雑なCSSをHTMLタグへ当てることがができることになります。