Categories: HTML&CSS

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;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

issiki_wp