今回はWEB制作でよく使う「擬似クラス」についてまとめました。
コーディングをする際に度々出てくるワードであるので、分からない人は是非理解しておきましょう。
擬似クラスとは？
擬似クラスとは、指定した要素が特定の状態である場合にスタイルを適応することができるセレクタのことです。
例えば、ボタンの上にカーソルを合わせるとボタンの色が変わる実装をみたことはないでしょうか？
これがまさに擬似クラスです。
主要な擬似クラス
それではWEB制作で使う主要な擬似クラスを紹介していきます。
「:hover」
「:hover」は、マウスカーソルを対象の要素にホバーしている時にスタイルが適応されます。
<a href="">擬似クラスです</a>
a:hover {
color: red;
}
aタグをマウスホバーした時に、文字色が赤色になるようにしました。
こちらはボタンをホバーした際に色が変わることで、ユーザーにボタンを押せることを知らせるために使われることが多いですね。
「:active」
「:active」はクリックすることでスタイルが適応される擬似クラスです。
正確には、クリックしてから離すまでスタイルが適応されます。
<a href="">擬似クラスです</a>
a:active {
color: red;
}
上記のコードでは、aタグをクリックしてから離すまで文字色が赤色になります。
他にも画像を指定することで、画像を切り替えることもできますよ。
「:link」
「:link」は、まだ見ていないページのリンクにCSSを適応させます。
<a href="https://twitter.com/yujiro99855973" target="_blank">擬似クラスです</a>
a:link {
color: red;
}
「:visited」
「:visited」は、既に見たページのリンクに対してスタイルを適応します。
<a href="https://twitter.com/yujiro99855973">擬似クラスです</a>
a:visited {
color: red;
}
「:checked」
「:checked」は、ラジオボタンやボックスでチェックされた場合にスタイルが適応されます。
<input type="radio" name="cr3" id="c7" checked>
<label for="c7">1</label>
<input type="radio" name="cr3" id="c8">
<label for="c8">2</label>
<input type="radio" name="cr3" id="c9">
<label for="c9">3</label>
input:checked + label{
background-color: pink;
}
上記のコードは、チェックボックスをクリックした時に、数字の背景色がピンク色になります。
「:focus」
「:focus」は、テキストボックスの入力欄などにフォーカスが当たった時にスタイルが適応されます。
<input type="text" value="foucus">
input:focus {
background-color: red;
}
上記のコードは、テキストボックスの入力欄をクリックすると、背景色が赤色になる実装です。
実際のお問い合わせフォームでも使われていることがありますね。
まとめ
擬似クラスは実務でも頻繁に使うので、是非理解しておきたいところです。
もし分からない部分があれば、真似してコーディングしてみましょう。
