--- title: ':required' slug: 'Web/CSS/:required' translation_of: 'Web/CSS/:required' --- <p>{{ CSSRef() }}</p> <h2 id="Summary">Summary</h2> <p>De <code>:required</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> staat voor elk {{ HTMLElement("input") }} element waar de {{ htmlattrxref("required", "input") }} attribute op staat. Dit stelt formulieren in staat om gemakkelijk aan te tonen welke velden geldige data hebben voordat een formulier verzonden kan worden.</p> <p>De {{ cssxref(":optional") }} pseudo-class kan gebruikt worden voor uiterlijk van optionele formulier velden.</p> <h2 id="Syntax">Syntax</h2> {{csssyntax}} <h2 id="Voorbeeld">Voorbeeld</h2> <p>Bekijk {{ cssxref(":invalid") }} voor een voorbeeld.</p> <h2 id="Specificaties">Specificaties</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specificatie</th> <th scope="col">Status</th> <th scope="col">commentaat</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td> <td>{{ Spec2('HTML WHATWG') }}</td> <td>Geen verandering.</td> </tr> <tr> <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td> <td>{{ Spec2('HTML5 W3C') }}</td> <td>Staat voor de semantiek van HTML en validatie.</td> </tr> <tr> <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td> <td>{{ Spec2('CSS4 Selectors') }}</td> <td>Geen verandering.</td> </tr> <tr> <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td> <td>{{ Spec2('CSS3 Basic UI') }}</td> <td>Staat voor de pseudo-class, maar niet voor de geassocieerde semantiek.</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Browser compatibility</h2> <p>{{ CompatibilityTable() }}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>10.0</td> <td>{{ CompatGeckoDesktop("2") }}</td> <td>10</td> <td>10.0</td> <td>5.0</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("2") }}</td> <td>{{ CompatNo() }}</td> <td>10.0</td> <td>5.0</td> </tr> </tbody> </table> </div> <h2 id="Bekijk_ook">Bekijk ook</h2> <ul> <li>{{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> </ul>