diff --git a/src/components/styled/modal.css b/src/components/styled/modal.css
index 7485c17e06a..fc8c0d8d958 100644
--- a/src/components/styled/modal.css
+++ b/src/components/styled/modal.css
@@ -6,7 +6,7 @@
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
 }
 .modal-open .modal-box,
-.modal-toggle:checked ~ .modal .modal-box,
+.modal-toggle:checked + .modal .modal-box,
 .modal:target .modal-box{
   @apply translate-y-0 scale-100;
 }
diff --git a/src/components/unstyled/modal.css b/src/components/unstyled/modal.css
index 48f0b3f7488..ac70d121a5c 100644
--- a/src/components/unstyled/modal.css
+++ b/src/components/unstyled/modal.css
@@ -4,7 +4,7 @@
 }
 .modal-open,
 .modal:target,
-.modal-toggle:checked ~ .modal{
+.modal-toggle:checked + .modal{
   @apply visible opacity-100 pointer-events-auto;
 }
 .modal-action{