擬似クラス

CSSの擬似クラスとは、セレクタの特定の状態を表します。選択された要素が、ある状態になった時のスタイルを指定できます。

button:hover {
  opacity: 0.7;
}

「:hover」の部分が擬似クラスです。:hoverは要素にカーソルが乗っている状態を指します。この例では、<button>にカーソルが乗ると、opacity(不透明度)が0.7になります。

opacityは0〜1の値を取ります。0が完全に透明で、1が完全に不透明です。

もう一つ擬似クラスを紹介しましょう。

button:active {
  transform: translateY(4px);
  border-bottom: none;
}

:activeは要素がアクティブな状態を指します。<button>なら「クリックされてから離されるまで」です。

擬似クラスが使えるようになると、デザインの幅が広がります。ぜひ調べてみましょう。

参考記事

擬似クラス
CSS の 擬似クラス ( Pseudo-classes ) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。
:active擬似クラス-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
opacity-CSS3リファレンス
CSS3のプロパティ解説

コメント

タイトルとURLをコピーしました