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 {
...
}
|