W3C CSS Validator error with required attribute

Question

I'm getting the following error in the W3C CSS 3 Validator:

Unknown pseudo-element or pseudo-class :required

Required is a HTML5 input attribute. My CSS works in IE10, Google Chrome and Firefox.

This is my CSS:

#reserved input:required {background:#eaeae6;}
#reserved select:required {background:#eaeae6;}

This is my HTML code:

<section id="reserved">
    <select id="hab" name="hab" title="Study or Apartment" required>
    <input type="text" id="name" name="name" maxlength="50" style="width: 200px;" title="Name and Surname" required/>
</section>

Doesn't W3C recognize the required attribute like a standard?

lonesomeday · Accepted Answer · 2014-10-11 19:28:16Z

6

CSS3 includes the Selectors Level 3 API. Selectors 3 does not include the :required selector.

:required was introduced in Selectors Level 4. Browsers support it, but it isn't part of the CSS3 specification and so will fail in a CSS3 validator.

answered Oct 11, 2014 at 19:28

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

henser Over a year ago

+1 ... missed the part were it failed in css3 validation. it will fail with HTML validation if using XHTML though. Nothing wrong with leaving it written here. :)

BoltClock Over a year ago

Actually, :required first appeared in css3-ui, before being promoted to the Selectors 4 spec. This is confirmed by sel4 here. That said, sel4 is part of CSS3 anyway (despite the "4") so either way it should validate - the validator just needs to be updated, unless it considers that part of css3-ui non-canon for some reason.

Mar Millán · Accepted Answer · 2014-10-12 11:19:42Z

0

Thanks for your answer lonesomeday.

I change my css and create a class instead of the required pseudo-class like this:

#reserved .required-class {background: #eaeae6;}

<input class="required-class" type="email" id="email" name="email" pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}" style="width: 200px;" title="email" required/>

With this change, now I've passed the W3C Validator :D

answered Oct 12, 2014 at 11:19

Mar Millán

1981 silver badge8 bronze badges

Collectives™ on Stack Overflow

W3C CSS Validator error with required attribute

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related