11/3　学習内容（セレクタの書き方）

複数指定

書き方
◯,◯,◯ {〜}
「,」で区切る

効果
複数のタグやクラスに対して同じCSSをまとめて適用させる

イメージ
○　and　○　and　○　すべてのセレクタに適用

子孫セレクタ(絞り込み)

書き方
◯ ◯  {〜}
半角スペース空ける。

イメージ
○　に含まれている　○　にのみ適用

子セレクタ

書き方
◯ > ◯ {〜}
「>」をいれる
1つ下の階層の子要素にのみ適用される

イメージ
○　の　子要素に当たる　○　にのみ適用される。

隣接セレクタ

同じ階層の直後に隣接している要素にスタイルを適用する。

書き方
◯ ＋ ◯ {〜}
「＋」　を入れる

イメージ
○　の隣の　○　にのみ適用される。

◯番目の要素だけに適用するセレクタ

最初の要素だけ
◯:first-child {〜}
最初の要素だけに適用される。
最初の要素以外に適用させたいときは、
○:not（：first-child） {〜}
※複数指定もできる

最後の要素だけ
◯:last-child {〜}
最後の要素にだけ適用される。

表やリストの奇数行だけ
◯:nth-child(odd) {〜}
偶数番目だけ
◯:nth-child(even) {〜}
交互色にするときに使用

n番目だけ
◯:nth-child(3n) {〜}
↑3の倍数番目の要素だけに適用
(2n+1)とすれば3、5、7番目に適用

擬似クラス
a:hover {〜}：カーソルを上にのせたときのスタイル
a:visited {〜}：訪問済みリンクのスタイル
a:link {〜}：未訪問のリンクのスタイル
a:active {〜}：クリックした瞬間（ボタンを押し込んだとき）のスタイル