【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>

関連記事

HTML/CSS入門・サンプル集

関連記事