Wivern Blog

Personal-Tech memorandum

CSSセレクタの組み合わせ

CSSを久しぶりに書いて見るとCSSの組み合わせを忘れていたのでメモ。

cssSelectorCombination.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 複数セレクタ
  同じスタイルを適用したいセレクタ1,セレクタ2をまとめる */
セレクタ1, セレクタ2 {
  ...
}

/* 子孫セレクタ
  セレクタ1の要素で囲まれたセレクタ2要素にスタイルを適用する。
  セレクタ1要素には適用されない。*/
セレクタ1 セレクタ2 {
  ...
}

/* 子セレクタ
  子孫セレクタと比べて、セレクタ2要素がセレクタ1要素の直下にある場合にセレクタ2要素に適用される。
  セレクタ1要素には適用されない。*/
セレクタ1 > セレクタ2 {
  ...
}

/* 隣接セレクタ
  同じ階層にある要素同士で、セレクタ1要素の直後にセレクタ2要素があれば適用する。
  セレクタ1要素には適用されない。*/
セレクタ1 + セレクタ2 {
  ...
}