CSSセレクターの種類と使い方

全称セレクター*{}

すべての要素にスタイルを適用します。

See the Pen
zensho-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

* {
  background-color:pink;
}

要素セレクターele{}

指定した要素に対してスタイルを適用します。
下記のコードでは、p要素に対してスタイルを適用しています。

See the Pen
type-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

p {
  background-color:pink;
}

クラスセレクター.class{}

以下の2種類の指定方法があります。

クラス名のみ指定する方法

指定したクラスに対してスタイルを適用します。
下記のコードでは、c3クラスの要素に対してスタイルを適用しています。

See the Pen
class-selector1 by shiakisudev (@shiakisu)
on CodePen.

CSS

.c3 {
  background-color:pink;
}

もっと詳しく

クラス名はHTMLの中で何回も使えるので、同じクラス名の要素にはすべて同じスタイルが適用されます。

See the Pen
poyNQYm by shiakisudev (@shiakisu)
on CodePen.

要素名とクラス名を指定する方法

指定した要素とクラスをもつ場合のみスタイルを適用します。
下記のコードではdiv要素かつ、c3クラスを持っている要素に対してスタイルを適用しています。

See the Pen
class-selector2 by shiakisudev (@shiakisu)
on CodePen.

CSS

div.c3 {
  background-color:pink;
}

idセレクター#id{}

指定したidを持つ要素に対してスタイルを適用します。

See the Pen
id-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

#div2 {
  background-color:pink;
}

属性セレクター[attr]{}

以下の2種類の指定方法があります。

指定した属性を持つすべての要素に適用

以下のように[type]とすれば、type属性を持つすべての要素に対してスタイルが適用されます。

See the Pen
type-selector1 by shiakisudev (@shiakisu)
on CodePen.

CSS

[type] {
  background-color:pink;
}

指定した属性のうち特定の要素に適用

以下のように[type='password']とすれば、type属性のうちpasswordを設定している要素に対してスタイルが適用されます。

See the Pen
type-selector2 by shiakisudev (@shiakisu)
on CodePen.

CSS

[type="password"] {
  background-color:pink;
}

擬似セレクター

See the Pen
giji-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

p:first-child {
  background-color:pink;
}

子孫セレクターA B{}

子要素だけでなく、孫要素、ひ孫要素にもスタイルを適用したい場合は子孫セレクターを使います。
子要素のみにスタイルを適用したい場合は、後述の子セレクターを使います。

See the Pen
sison-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

.c1 p{
  background-color:pink;
}

子セレクターA > B{}

子要素（1階層下）のみスタイルを適用したい場合は子セレクターを使います。
孫要素（2階層下）、子孫要素（3階層下）にはスタイルが適用されません。

See the Pen
ko-selecotr by shiakisudev (@shiakisu)
on CodePen.

CSS

.c1 > p{
  background-color:pink;
}

隣接セレクターA + B{}

隣接セレクターは、Aの直後に存在する同階層のBにのみスタイルを適用します。

See the Pen
mdPEzWE by shiakisudev (@shiakisu)
on CodePen.

HTML

<h2>見出し1</h2>
<p>a</p>
<p>b</p>
<h2 id="toc2">見出し2</h2>
<p>c</p>
<p>d</p>
<h2>見出し3</h2>
<p>e</p>
<p>f</p>

CSS

#toc2+p{
  background-color:red;
}

間接セレクターA ~ B{}

間接セレクターは、Aの後に記述した同階層のBすべてにスタイルを適用します。

See the Pen
tiruda by shiakisudev (@shiakisu)
on CodePen.

HTML

<h2>見出し1</h2>
<p>a</p>
<p>b</p>
<h2 id="toc2">見出し2</h2>
<p>c</p>
<p>d</p>
<h2>見出し3</h2>
<p>e</p>
<p>f</p>

CSS

#toc2~p{
  background-color:red;
}

グループ化A,B{}

AとBをカンマ区切りで記述することによって同じスタイルを適用することができます。

See the Pen
grouping-selector by shiakisudev (@shiakisu)
on CodePen.

CSS

[type=text],[type=password] {
  background-color:pink;
}