【CSS】セレクタの基本的な使い方まとめ

この記事では、CSS・セレクタの基本的な使い方についてまとめました。。

## セレクタとは

セレクタとは、CSSの適用範囲を設定する機能です。
例えば特定のclass名やid名のみに適用する範囲を指定したりできます。
今回はよく使うセレクタをまとめてみました。

## IDセレクタ（#ID）

特定のID名のみにCSSの設定が反映されます。
以下の例だとID名「left」のみにCSSの設定が適用されます。

#left {
  font-size:16px;
}

## classセレクタ（.class）

ドット(.class-name)で指定したクラス名にCSSを適用します。
クラス名（box）の要素のフォントサイズを16pxにします。

.box {
  font-size:16px;
}

<div class="box">
ここで適用される
</div>

## 要素セレクタ(div)

要素セレクタでは、特定のHTML要素にCSSが適用されます。
以下の例では、全てのdiv要素にCSSが適用されます。

.div {
  font-size:16px;
}

## 複数classを適用（class=”class1 class2″）

HTML側で半角スペースで区切って複数のクラス名を記述すると、複数のCSSが適用されます。
以下の例では、2つのクラス名「box」「font-color-red」の設定を同時に適用します。

.box {
  font-size:16px;
}

.font-color-red {
  color:#ff0000;
}

<div class="box font-color-red">
ここで適用される
</div>

## 全要素セレクタ（*）

アスタリスク（*）を使うとCSSを全ての要素に適用します。
HTML内の全ての要素のフォントサイズが16pxになります。

* {
  font-size:16px;
}

全てのdiv要素のフォントサイズが16pxになります。

div * {
  font-size:16px;
}

## 子孫セレクタ

子孫セレクタは、子要素と孫要素にCSSが適用させます
記述方法は、セレクタを半角スペースで区切ります。

div要素内にある全てのp要素にCSSを適用します。

div p {
  font-size:16px;
}

<div>
<p>ここで適用される</p>
</div>

クラス名「box」内にある全てのp要素にCSSが適用されます。

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

<div class="box">
<p>ここで適用される</p>
</div>

クラス名がboxのdiv要素のみフォントサイズを16pxにします。

div.box {
  font-size:16px;
}

<div class="box">
ここで適用される
</div>

## 子要素セレクタ（.class-name > p）

子セレクタは、子要素にだけにCSSが適用させます。（孫要素は適用されない）

div.box p {
  font-size:16px;
}

<div class="box">
<p>適用される</p>
</div>

## 隣接要素セレクタ(div + p)

隣接要素セレクタは、特定の要素に隣接する要素だけにCSSが適用されます。
以下の例では、divに隣接するp要素だけにCSSが適用されます。

div + p {
  font-size:16px;
}

<div></div>
<p>divに隣接してるので適用される</p>
<p>divに隣接していない隣ので適用されない</p>

## 後ろの要素セレクタ（div ~ p）

「~」で特定要素の後にある全ての要素にCSSが適用されます。

div ~ p {
  font-size:16px;
}

<p>divの前なので適用されない</p>
<div></div>
<p>divの後ろなので適用される</p>
<p>divの後ろなので適用される</p>

コメント