<aside> ⚠️ Quand on veut un élément qui est à l'intérieur d'une iframe, on doit faire comme si TOUT ce qu'il y a en dehors du CONTENU de l'iframe n'existait pas.

</aside>

Pour réaliser des actions à l'intérieur des iframes, il faut utiliser des sélecteurs CSS soit à l'intérieur de l'iframe, soit à l'extérieur, mais PAS des sélecteurs qui "traversent" les 2 contextes.

Avec un exemple ça sera mieux, avec ce HTML :

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

Exemples de requêtes sur ce HTML

.main iframe

✅ ⇒ renvoie l'iframe

#my-form

✅ ⇒ renvoie le 1er my-form (celui qui n'est pas dans l'iframe)

.main iframe .frame-content

❌ ⇒ ne fonctionne pas, car .frame-content appartient au document de l'iframe

.frame-content #my-form

✅ ⇒renvoie le form qui se trouve à l'intérieur de l'iframe

iframe #my-form

❌ ⇒ ne fonctionne pas car #my-form est déjà dans le document de l'iframe.