diff --git a/components/style/element_state.rs b/components/style/element_state.rs
index 87ad23ca04d..842285c8e9b 100644
--- a/components/style/element_state.rs
+++ b/components/style/element_state.rs
@@ -57,7 +57,11 @@ bitflags! {
         const IN_HANDLER_DISABLED_STATE = 1 << 18,
         #[doc = "Non-standard: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-handler-crashed"]
         const IN_HANDLER_CRASHED_STATE = 1 << 19,
+        #[doc = "https://html.spec.whatwg.org/multipage/#selector-required"]
+        const IN_REQUIRED_STATE = 1 << 20,
+        #[doc = "https://html.spec.whatwg.org/multipage/#selector-optional"]
+        const IN_OPTIONAL_STATE = 1 << 21,
         #[doc = "https://html.spec.whatwg.org/multipage/#selector-read-write"]
-        const IN_READ_WRITE_STATE = 1 << 20,
+        const IN_READ_WRITE_STATE = 1 << 22,
     }
 }
diff --git a/components/style/gecko/non_ts_pseudo_class_list.rs b/components/style/gecko/non_ts_pseudo_class_list.rs
index 1834f1cf1f3..43a35ae5536 100644
--- a/components/style/gecko/non_ts_pseudo_class_list.rs
+++ b/components/style/gecko/non_ts_pseudo_class_list.rs
@@ -59,6 +59,8 @@ macro_rules! apply_non_ts_list {
                     PSEUDO_CLASS_INTERNAL),
                 ("-moz-handler-crashed", MozHandlerCrashed, mozHandlerCrashed, IN_HANDLER_CRASHED_STATE,
                     PSEUDO_CLASS_INTERNAL),
+                ("required", Required, required, IN_REQUIRED_STATE, _),
+                ("optional", Optional, optional, IN_OPTIONAL_STATE, _),
                 ("read-write", ReadWrite, _, IN_READ_WRITE_STATE, _),
                 ("read-only", ReadOnly, _, IN_READ_WRITE_STATE, _),
 
diff --git a/components/style/gecko/wrapper.rs b/components/style/gecko/wrapper.rs
index ca0fa3525d9..bcdc81052aa 100644
--- a/components/style/gecko/wrapper.rs
+++ b/components/style/gecko/wrapper.rs
@@ -707,7 +707,9 @@ impl<'le> ::selectors::Element for GeckoElement<'le> {
             NonTSPseudoClass::MozLoading |
             NonTSPseudoClass::MozHandlerBlocked |
             NonTSPseudoClass::MozHandlerDisabled |
-            NonTSPseudoClass::MozHandlerCrashed => {
+            NonTSPseudoClass::MozHandlerCrashed |
+            NonTSPseudoClass::Required |
+            NonTSPseudoClass::Optional => {
                 self.get_state().contains(pseudo_class.state_flag())
             },
             NonTSPseudoClass::ReadOnly => {