ドキュメント : Pseudo Class
-
【CSS】:hover(擬似クラス) - カーソルが被さった状態
CSSの擬似クラスの1つ、hoverについてご紹介します。:hover:hoverはポインティングデバイス(マウスカーソル)が要素に被さった状態です。基本構文:hover { プロパティ名: プロパティ値;}サンプル<style>h1:hover { color: red;}</style><h1>CSSとは</h1><p>C
-
【CSS】:checked(擬似クラス) - チェック状態
CSSの擬似クラスの1つ、checkedについてご紹介します。:checkedcheckedはチェックボックスやラジオボタンがONの状態です。基本構文:checked { プロパティ名: プロパティ値;}サンプルチェックボックスにチェックを入れるとチェック時の色が赤に変わります。<style>input:checked { accent-color: #ff0000;}&l
-
【CSS】:required(擬似クラス) - 必須状態
CSSの擬似クラスの1つ、requiredについてご紹介します。:required:requiredは入力要素が必須の状態です。基本構文:required { プロパティ名: プロパティ値;}サンプル<style>input:required { display: block; border: 1px solid red;}</style><inpu
-
-
【CSS】:active(擬似クラス) - アクティブな状態
CSSの擬似クラスの1つ、activeについてご紹介します。:active:activeは要素がクリックなどによるアクティブになった状態です。基本構文:active { プロパティ名: プロパティ値;}サンプル<style>input:active { display: block; border: 1px solid red; outline: none;}&
-
【CSS】:focus(擬似クラス) - フォーカスがあたっている状態
CSSの擬似クラスの1つ、focusについてご紹介します。:focus:focusは要素にフォーカスがあたっている状態です。基本構文:focus { プロパティ名: プロパティ値;}サンプル入力項目をクリックし、フォーカスをあてると、枠線が赤くなります。<style>input:focus { display: block; border: 1px solid red
-
-
-
【CSS】:not(擬似クラス) - マッチしない要素
CSSの擬似クラスの1つ、notについてご紹介します。:not:not基本構文:not(セレクター) { プロパティ名: プロパティ値;}サンプルclass属性がformal-nameではないp要素にスタイルを定義しています。<style>p:not(.formal-name) { color: red;}</style><h1>CSSとは</
-
【CSS】:first-child(擬似クラス) - 最初の要素
CSSの擬似クラスの1つ、first-childについてご紹介します。:first-child:first-childは階層ごとの最初の要素です。基本構文:first-child { プロパティ名: プロパティ値;}サンプル<style>h2:first-child { color: red;}</style><h1>CSSとは</h1>
-
【CSS】:last-child(擬似クラス) - 最後の要素
CSSの擬似クラスの1つ、last-childについてご紹介します。:last-child:last-childは階層ごとの最後の要素です。基本構文:last-child { プロパティ名: プロパティ値;}サンプル最後かつpの要素にスタイルを適用しています。<style>p:last-child { color: red;}</style><h1>
-
-
【CSS】:only-child(擬似クラス) - 1つのみの要素
CSSの擬似クラスの1つ、only-childについてご紹介します。:only-child:only-childは同階層で1つのみの要素です。基本構文:only-child { プロパティ名: プロパティ値;}サンプルliが1つしかない要素にスタイルを適用しています。<style>li:only-child { color: red;}</style><u
-
【CSS】:nth-child(擬似クラス) - N番目の要素
CSSの擬似クラスの1つ、nth-childについてご紹介します。:nth-child:nth-childはN番目の要素です。基本構文:nth-child(n) { プロパティ名: プロパティ値;}nの部分は番号です。番号の形式は整数、加算、減算サンプル<style>h2:nth-child(3) { color: red;}</style><div>