擬似クラス

擬似クラス

• 特定の状態に対してのみスタイル（CSS）が反映されるセレクタを作る

:hover

• 主にマウスカーソルの動作に対して使われる擬似クラスです
• マウスカーソルがホバーした時（要素の上に乗った時）にスタイルを反映させる

<p><a href="#">テキストリンク</a></p>

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #ff3700;
  text-decoration: underline;
}

:hover

• :nth-child()
• ( )内は、evenや2nで偶数の子要素にスタイルを反映させる

  <ul>
    <li>アイテム１</li>
    <li>アイテム２</li>
    <li>アイテム３</li>
    <li>アイテム４</li>
    <li>アイテム５</li>
    <li>アイテム６</li>
  </ul>

li:nth-child(even) {
  color: #ff3700;
}