セレクター

セレクターは、いろいろな種類がある。

また、これらのセレクタを組み合わせることにより複雑な選択が可能。（これについては触れないでおく）

タグセレクタ

HTMLのタグを選択する

h1 {
}
p {
}

HTMLのclass属性を見て選択することができる。
クラス名の前に.をつければ良い。

/* hoge というクラスを選択する場合 */
.hoge {
}

/* hoge というidを選択する場合 */
#hoge {
}

擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

例えば ::first-line 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

(MDNより引用)

詳しくはこちらをみてください

p::first-line {
  color: yelow;
}

擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。

例えば :hover 擬似クラスで、ユーザーのマウスカーソルが当たったときにボタンの色を変更することができます。

(MDNより引用)

詳しくはこちらをみてください

button:hover {
  background: black;
}

CSS Dinerをやってみてください。

まず、右の説明を読み、そのレベルで使うセレクターについて理解する。

次にCSS Editorの中で、上の画面で踊ってるやつを選ぶセレクターを入力。
できたと思ったらEnterキーを押す。

エディタ全体が揺れるようなエフェクトの時は間違い、
踊ってるやつが飛んでいけば正解です。