今回はセレクタについて紹介します。
CSSの基礎中の基礎なのできちんと理解しましょう。

セレクタとは？

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

セレクタとは、スタイルを適用させたい範囲を指定する部分です。
また、セレクタには様々な指定方法があります。

主要なセレクタ

この後、いくつかセレクタを紹介していきますが、
下記の3種類は特に重要なので絶対に覚えるようにしましょう。

1. タグ名で指定する
2. class名で指定する
3. id名で指定する

タグ名で指定する「〇」

p {
    font-size:16px;
}
 

この方法は指定したいHTMLタグ名をセレクタにする方法です。
特定のタグにまとめてCSSを適用したい時に使います。
ただし、この方法だと読み込み速度が少しだけ遅くなるので
classを適用している部分であればclassを使うことをおすすめします。

HTML入門～HTMLでよく使うタグ～

class名で指定する「.〇」

.font {
    font-size:16px;
}
 

この方法は指定したいclass名をセレクタにする方法です。
class名の前には「.(ドット)」を書きます。
セレクタの優先度がタグ名よりも高いです。

HTML入門～classとidを理解しよう～

id名で指定する「#〇」

#font {
    font-size:16px;
}
 

この方法は指定したいid名をセレクタにする方法です。
id名の前には「#(シャープ)」を書きます。
セレクタの優先度がclass名よりも高いです。

HTML入門～classとidを理解しよう～

セレクタの複数指定「〇,△」

div,.a,#b {
    font-size:16px;
}
 

セレクタを複数指定したい場合「,(カンマ)」で区切ります。
いくつでも並べることができ、並び順にも特にルールはありません。

ただし、あまりに多く複数指定する必要がある場合は、
ブラウザの読み込み速度が遅くなるので、
新しいclassを作って指定するようにしましょう。

子孫セレクタ「〇 △」

/*HTML*/
<div class="font">
  <p>～</p>
  <div class="font2">
  	<p>～</p>
  </div>
</div>
<p class="font">
	<div>
		～
	</div>
</p>

/*CSS*/
.font p {
    font-size:16px;
}
 

子孫セレクタは、「〇〇要素内にある〇〇要素」にスタイルを適用させます。
指定する際には、セレクタをスペースで区切っていきます。
上の例ですと「.font」の中にある「pタグ」全てにCSSが適用されます。
なので、下にあるclass「font」がついてるpタグには適用されません。

たくさん区切るほど適用先が絞られます。

.font p span {
    font-size:16px;
}
 

この例ですと、「.font」の中にある「pタグ」の中にある「spanタグ」にのみ適用されます。

子セレクタ「〇>△」

/*HTML*/
<div class="font">
  <p>～</p>
  <div class="font2">
  	<p>～</p>
  </div>
</div>

/*CSS*/
.font>p {
    font-size:16px;
}
 

子セレクタは、「〇〇要素内の直下にある子要素の〇〇要素」にスタイルを適用させます。
指定する際には、セレクタを「>(終わり山かっこ)」で区切っていきます。
子孫セレクタ同様、たくさん区切るほど適用先が絞られます。
直下の子要素のみに適用されるので孫要素以下には適用されません。

上の例ですと「.font」の直下にある「pタグ」にのみCSSが適用されます。
「.font2」の中の「pタグ」には適用されません。

隣接セレクタ「〇+△」

/*HTML*/
 <p class="a">～</p>
 <div class="font"></div>
 <p class="b">～</p>
 <p class="c">～</p>

/*CSS*/
.font+p {
    font-size:16px;
}
 

隣接セレクタは、「〇〇要素の直後に隣接した〇〇要素」にのみスタイルを適用させます。
指定する際には、セレクタを「+(プラス)」で区切っていきます。
上の例だと、「b」というclassの付いているpタグにのみCSSが適用されます。

全称セレクタ「*」

* {
    font-size:16px;
}
 

全称セレクタは、すべての要素に対してスタイルを適用させるセレクタです。
指定するときは「*(アスタリスク)」をセレクタに使用します。
ただし、全称セレクタを使うと、他の指定方法よりもブラウザの読み込み速度が遅くなるので、
リセットCSSなどのどうしても必要な場合を除き、なるべく使用しすぎないようにしましょう。

擬似クラス「〇:△」

a:hover {
    color:red;
}
 

擬似クラスは、要素が特定の状態にある場合にスタイルを指定するものです。
使用する際は、セレクタと擬似クラスの間を「:(コロン)」で繋ぎます。

上の例だと「aタグ」にマウスが乗っかっている状態のときのみ文字色を赤にします。
擬似クラスで1番よく使われるのはhoverですが、他にもいくつか種類があります。

CSS入門～擬似クラスを理解しよう～

擬似要素「〇::△」

a::before {
    color:red;
}
 

擬似要素は、要素内の特定の文字や行に対してスタイルを指定したり、
文字や画像を追加することができます。
これは少々ややこしいので個別記事をご覧ください。

CSS入門～擬似要素を理解しよう ～

属性セレクタ「〇[△="X"]」

/*HTML*/
<a href="http://www.google.co.jp/" target="_blank">ターゲット</a>
<a href="http://www.google.co.jp/">モブ</a>

/*CSS*/
a[target="_blank"] {
    font-size:16px;
}
 

属性セレクタは、特定の属性値を持つ指定要素にスタイルを適用させます。
上の例だと、target="_blank"の属性の付いたaタグのみにスタイルを適用しています。