【CSS】擬似クラス - 要素状態のセレクター
CSSの擬似クラスについてご紹介します。
擬似クラス
擬似クラスはセレクターにおいて、要素の状態を示すキーワードです。
基本構文
:擬似クラス {
プロパティ名: プロパティ値;
}例
フォーカスがあたっている状態を示す:focusを使用します。
次の例では入力項目をクリック（タップ）すると、フォーカスがあたり、テキストカラーが赤になります。
<style>
:focus{
color: red;
}
</style>
<label>検索</label>
<input type="text" value="テキスト">代表的な擬似クラス
擬似クラスは様々な種類があります。
ここでは一般的によく使われる代表的な擬似クラスをご紹介します。
hover
hoverはポインティングデバイス（マウスカーソル）が要素に被さった状態です。
詳しくは次の記事をご覧ください。
checked
checkedはチェックボックスやラジオボタンがONの状態です。
詳しくは次の記事をご覧ください。
required
requiredは入力要素が必須の状態です。
詳しくは次の記事をご覧ください。
active
activeは要素がクリックなどによるアクティブになった状態です。
詳しくは次の記事をご覧ください。
focus
focusは要素にフォーカスがあたっている状態です。
詳しくは次の記事をご覧ください。
not
notはセレクターにマッチしない要素です。
詳しくは次の記事をご覧ください。
first-child
first-childは兄弟要素の最初の要素です。
詳しくは次の記事をご覧ください。
last-child
last-childは兄弟要素の最後の要素です。
詳しくは次の記事をご覧ください。
only-child
only-childは兄弟要素がない１つのみの要素です。
詳しくは次の記事をご覧ください。
nth-child
nth-childは兄弟要素のN番目の要素です。
詳しくは次の記事をご覧ください。
nth-last-child
nth-last-childは兄弟要素の最後からN番目の要素です。
詳しくは次の記事をご覧ください。
first-of-type
first-of-typeは兄弟要素の最初の特定要素です。
詳しくは次の記事をご覧ください。
last-of-type
last-of-typeは兄弟要素の最後の特定要素です。
詳しくは次の記事をご覧ください。
only-of-type
only-of-typeは兄弟要素に特定要素が１つのみの要素です。
詳しくは次の記事をご覧ください。
nth-of-type
nth-of-typeは兄弟要素のN番目の特定要素です。
詳しくは次の記事をご覧ください。
nth-last-of-type
nth-last-of-typeは兄弟要素の最後からN番目の特定要素です。
詳しくは次の記事をご覧ください。
