【CSS】擬似クラス

<ul>
  <li>１</li>
  <li>２</li>
  <li>３</li>
</ul>
<a href="http://google.com">google!</a>
<input type="text">

:first-childを使用

ul li:first-child {
  color: red;
}

結果

:link, :visited, :hover, :activeを使用

リンクに対して以下の擬似クラスが使用可能。

a:link { color: green; } /* 未訪問のリンク */
a:visited { color: blue; } /* 訪問済みのリンク */
a:hover { color: yellow; } /* マウスオーバーした時 */
a:active { color: orange; } /* リンクが押下された時 */

CSSが適用される優先順優先順位の関係上、順番は↑のようにしないと意図しない挙動になることがある。

:focusを使用

input:focus { background: green; } /* inputにフォーカスが当たった時に背景色を緑色に */