<aside> ⚠️ When you want an element that is inside an iframe, you have to pretend that EVERYTHING outside the iframe's CONTENT does not exist.

</aside>

To perform actions inside iframes, CSS selectors must be used either inside the iframe or outside, but NOT selectors that "cross" the 2 contexts.

With an example it will be better, with this HTML :

<div class="main">
  <form id="my-form"></form>
  <iframe>
    <div class="frame-content">
      <form id="my-form"></form>
    </div>
  </iframe>
</div>

Examples of queries on this HTML

.main iframe

✅ ⇒ returns the iframe

#my-form

✅ ⇒ returns the 1st my-form (the one not in the iframe)

.main iframe .frame-content

❌ ⇒ does not work, because .frame-content belongs to the iframe document

.frame-content #my-form

✅ ⇒ returns the form inside the iframe

iframe #my-form

❌ ⇒ does not work because #my-form is already in the iframe document.