【CSS】単純、複合、複雑セレクターについて解説！【初心者向け】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「単純、複合、複雑セレクター」について解説します。

「単純、複合、複雑セレクター」って何？？

このような方が対象です。

また、下の動画でも「単純、複合、複雑セレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

「単純、複合、複雑セレクター」とは何か？

CSSのセレクターは３種類に大別することができます。

CSSのセレクターはこれら３つに分類することができます。

そうなんだ！

「単純セレクター」とは何か？

h2 {
    color: skyblue;
}
.foo {
    color: skyblue;
}
#foo {
    color: skyblue;
}
[title] {
    color: skyblue;
}

「単純セレクター」とは「要素型セレクター」「classセレクター」「idセレクター」「属性セレクター」などの成分が１つしかないものを指します。

ここは区別が難しいのですが、単純な１つの要素からなるセレクターを指します。

区別に関しては、他のセレクターについても見てもらえたらと思います！

とにかくシンプルなものだね！

「複合セレクター」とは何か？

h2.foo {
    color: skyblue;
}
h2.foo.active {
    color: skyblue;
}
h2[title] {
    color: skyblue;
}
h2[title][data-category] {
    color: skyblue;
}

「複合セレクター」とは「要素とクラス名」「クラス名２つ」「要素と属性」などの２つ以上の成分からなるセレクターのことを指します。

ここで重要なのは、それらは半角空白を空けずに、くっつけて書かれている必要があることです。

半角空白は子孫結合子と呼ばれ、それが含まれるセレクターは「複雑セレクター」に分類されます。

「複雑セレクター」とは何か？

.foo h3 {
    color: skyblue;
}
.foo > h3 {
    color: skyblue;
}
.foo + h3 {
    color: skyblue;
}
.foo ~ h3 {
    color: skyblue;
}

「複雑セレクター」とは「結合子」が使われいるセレクターのことを指します。

CSSでは、これらの結合子を用いて、独立して有効なセレクター同士を繋げて、スタイルが当たる範囲を狭めることができます。

なるほど！よくわかったよ！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_selectors/Selector_structure

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

CSSのセレクターは３種類に大別することができる。

それは下記の通り。

そしてCSSに用意されている結合子は下記の通り。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも「単純、複合、複雑セレクター」について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！