• Parent/enfant

     Cette page ne peut intéresser que celles et ceux qui publient des articles par l'éditeur html(code source) et non par les icônes de la barre d'outils de création d'article.

    Comme je n'ai rien d'un professionnel des codes html5/CSS3, je regarde ce qui est expliqué sur le net et, comme vous sans doute, j'ai rencontré des codes parlant de parents et enfants.

    D'après ce que j'en ai compris et ce que je teste en ce moment, un parent est un bloc (div, p...) et une enfant et le contenu de ce bloc.

    Ensuite, et pour l'utilisation que j'en ai, si dans un paragraphe, on place deux images deux adresses d'image, l'une derrière l'autre, la première adresse sera considérée comme l'enfant numéro 1 et la seconde, l'enfant numéro 2 et ainsi de suite.

    <p id="para1"><img src="http1"><img src="http2"></p>

    et ils seront identifiés, en CSS par:

    <style><!--

    #para img:nth-child(1) ...

    #para img:nth-child(2) ...

    --></style> 

    ce qui évite de les identifier chacun, par un identifiant su genre: id="im1" et id="im2"

    Un exemple est sans doute plus parlant: voici une bloc (div) qui comprend 2 images en 800x600px; la première est visible et la seconde, par dessus, n'apparaît qu'en la survolant.

     

    Le code avec un piège dans lequel je suis tombé:
    <p id="ex1">
    <img src="http://ekladata.com/r6ICRidMYHljXpEJ8wr6crhH-6c/5966.jpg" alt="" />
    <img src="http://ekladata.com/MTW7Yw9T4AthFAHlq9IQ31OW9EA/5968.jpg" alt="" />
    </p>
    <style><!--
    #ex1{position:relative; width:800px; height:600px; border:4px ridge white; margin:10px auto; }
    #ex1 img:nth-child(1){position:absolute; transform:translate(0px,0px); z-index:1; width:800px; height:600px; }
    #ex1 img:nth-child(2){position:absolute; transform:translate(0px,0px); z-index:2; width:800px; height:600px; transition:all 1s linear; opacity:0;}
    #ex1 img.demo:nth-child(2):hover{opacity:1;}
    --></style>
    Le piège, pour moi, a été l'écriture de la dernière ligne, qui définit l'animation au survol:

    #ex1 img.demo:nth-child(2):hover{opacity:1;}    surtout pas d'espace autour du :
    Heureusement qu'on trouve tout sur le net, même des solutions !

    Dans ce code,vous trouvez le positionnement du parent (div id="ex1") et les deux enfants : nth-child(1) signifiant numéro enfant (1)... chaque "enfant" étant numéroté par son ordre d'écriture dans le parent.

    Ensuite, cette identification permet de leur appliquer des attributs et une animation au survol.