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