CSSセレクタ一覧

１．HTML属性の値による選択

　HTMLの属性名でセレクタ可能である。完全一致や部分一致などがある。

• 使い方の例：

• class属性が"test"というもの全て

• data-test属性に特定の値が存在する場合

class名と完全一致
[class="test"]{
}
class名の初めの文字が等しい
[class^=""]{
}
class名の終わりの文字が等しい
[class$=""]{
}
class名に特定の文字を含む
[class*=""]{
}

---

２．子セレクタ「>」

　セレクタで用いられる「>」は子セレクタと呼ばれる。親要素の一つ下のみの要素に対して適用される。孫要素には影響を与えないので注意。

• 使い方の例：

• フレックスアイテム全てに対して、一定のmarginを設定したい。

contentsクラスの直下の要素全てに対して適用(孫要素には影響なし)
.contents > *{
}

---

３．兄弟セレクタ「~」「+」

　隣接した同階層の要素に対する選択を可能にする兄弟セレクタが存在する。「+」は、選択したタグのすぐ下一つのタグに対して、「~」は、選択したタグの下全ての要素を選択する。選択したタグより上の要素は選択されない。孫要素は選択されない。

h2タグ以下全ての要素を選択
h2 ~ p {
  color: red;
}
h2タグ以下一つの要素を選択
h2 + p {
  color: red;
}

４．グループ選択「,」

　異なう要素に同じCSSを適用させたい場合は、カンマでつなぐ。

h1, h2, h3 {
  color: red;
]