プロパティとセレクタ
- プロパティ：どんな
- セレクタ：どこに
セレクタが示すのは場所だけではない
- それがCSS擬似クラス
- 要素の状態をセレクタに指定できる
わかりやすい例 :hover
- マウスカーソルが重なっている状態
- 背景色を変えてマウスカーソルのある場所を分かりやすくする
:focus
- フォーカスを持っている状態
- 入力項目を強調するのに有効
使いでのある :has
- :has()の中に書いた要素を内包する（直下でなくても良い）
- 色々と凝ったことが簡単に実現できる
フォーカスを持った入力項目エリア全体の背景色を変え、視認性を上げる
:focus-within
- 前ページの「フォーカスを持った入力項目エリア全体の背景色を変え」が簡単に実現できる！
簡易なバリデーションフィードバック :invalid, :valid
- 必須入力属性（required）が付いているinputの入力有無
- invalidとなっている次の要素のテキストを赤くする、など
- :placeholder-shownも面白い
位置による指定 :nth-xxx系
- :nth-first/:nth-last 最初/最後の要素
表の最初と最後だけ色を変える - :nth-child() 指定の位置の要素
:nth-child(odd)で縞模様をつけたり
割と奥が深い
開発者ツール
- 擬似クラスを強制的に付与することができる（覚えておくと便利）
最後に
- CSSは知っていると劇的にシンプルになることがある
- 研ぎ澄まされたCSSを書こう！
- 対応ブラウザにはご注意を