【8/27まで】Udemyの人気コースが今なら1,200円から!!

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

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

全称セレクター

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

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

CSS

* {
  background-color:pink;
}

要素セレクター

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

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

CSS

p {
  background-color:pink;
}

クラスセレクター

以下の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を持つ要素に対してスタイルを適用します。

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

CSS

#div2 {
  background-color:pink;
}

属性セレクター

以下の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;
}

子孫セレクター

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

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

CSS

.c1 p{
  background-color:pink;
}

子セレクター

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

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

CSS

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

隣接セレクター

隣り合っている要素スタイルを適用したい場合は子セレクターを使います。
下記の例はp要素の隣りに存在するinput要素にスタイルを適用します。

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

CSS

p+input{
  background-color:pink;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です