【CSS】擬似クラスの「:required」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:required」の使い方について解説します。

擬似クラスの「:required」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:required」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:required」を使うと何ができる？

<form action="">

    <label for="name">名前</label>
    <input type="text" id="name" name="name" required><br>　←この行に注目

    <label for="birthplace">出身</label>
    <input type="text" id="birthplace" name="birthplace"><br>

    <label for="profession">職業</label>
    <input type="text" id="profession" name="profession"><br>

    <button>ぼたん</button>

</form>

input:required {
    background-color: lightgreen;
}

「:required」を使うと「form部品」の中で「required属性」がついている要素にスタイルを当てることができます。

ふむふむ。

「required属性」とは何か？

<input type="text" id="name" name="name" required>

「required属性」をつけるとその項目を必須項目にすることができます。

フォームを送信する際は「required属性」がついている項目にデータが入力されていることが必須です。

なるほど！これはHTMLの知識だね。

「required属性」は論理属性

「論理属性」（Boolean attribute）とは、「true」か「false」のどちらかをとるHTMLの属性のことです。

その属性が「存在しているか」「存在していないか」だけが考慮されるタイプの属性のことですね。

required="true false"

その属性の値に「どんな値が入っていようと関係ない」ので注意してくださいね。

「required属性」をつけることができる要素

「required属性」は下記の要素に限られています。

これらの３つの要素にだけ「required属性」はつけられます。

「:required」を使う上での注意点

「:required」を使う上での注意点についても書いておきますね！

「required属性」に対応している要素にしか擬似クラスの「:required」は使えない

<p required>p要素です。</p>

:required {
    background-color: lightgreen;
}

「required属性」に対応している要素にしか擬似クラスの「:required」は使えません。

なので「p要素」などの「required属性」を使うことができない要素は、たとえ「required属性」がついていたとしても、それは選択できません。

つまり「required属性」が機能する可能性がある要素だけが選択できる、ということですね。

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#opt-pseudos

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:required

あわせて読みたい記事。

まとめ

「:required」を使うと「form部品」の中で「required属性」がついている要素にスタイルを当てることができる。

「required属性」をつけるとその項目を必須項目にすることができる。

「required属性」は「存在しているか」「存在していないか」だけが考慮される論理属性。

「required属性」がつけられる要素は下記に限られている。

「required属性」に対応している要素にしか擬似クラスの「:required」は使えない。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:required」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！