Fonctionnement des iframes

Pour réaliser des actions à l'intérieur des iframes, il faut utiliser des selecteurs CSS soit à l'intérieur de l'iframe, soit à l'extérieur, mais PAS des selecteurs 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>

.main iframe

✅ ⇒ renvoie bien 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 bien le form qui se trouve à l'intérieur de l'iframe cette fois-ci

iframe #my-form

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

⚠️ 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.