28172 sujets

CSS et mise en forme, CSS3

[Résolu] Souci avec :nth-of-type sur une image

Bonjour,

Cette règle fonctionne bien
#documents_joints.menu a img {
    max-width: 100%;
    height: auto;
    border-radius: 15%;
}


Celle-ci, pas du tout. 
#documents_joints.menu a img:nth-of-type(2) {
  border-radius: 55%;
}


:nth-of-type pas possible sur une image ?

Merci pour l'aide.
Bonjour,

On est bien d'accord : vos images descendent bien directement du même élément parent ? Je dis cela parce que c'est la condition pour que ça fonctionne, or, comme je vois un lien je me dis que ça m'étonnerait qu'il n'y en ait pas un par image...
Si mon intuition s'avérerait bonne il faudrait faire plutôt :
#documents_joints.menu a:nth-of-type(2) img {
  border-radius: 55%;
}

Modifié par Olivier C (05 Jul 2022 - 13:54)
A la réflexion cela me semble normal dans la mesure où il 'y a qu'une seule image à chaque appel de 
#documents_joints.menu a img:nth-of-type(2)

Alors comment cibler la deuxième image (d'une boucle) qui se trouve dans la cascade :
#documents_joints.menu
a
img
Je viens d'essayer 
#documents_joints.menu a:nth-of-type(2) img {
  border-radius: 55%;
}
Cela ne me donne pas le résultat espéré.
Modérateur
Salut,

Et 
#documents_joints.menu:nth-of-type(2) a img {
  border-radius: 55%;
}

?

En gros il faut l'appliquer sur les éléments qui se suivent sinon ca sert a rien...


pour
<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
  </a>
</div>
<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
  </a>
</div>
<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
  </a>
</div>

#documents_joints.menu:nth-of-type(2) a img {}


pour
<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
  </a>
  <a href="">
    <img src="" alt="">
  </a>
  <a href="">
    <img src="" alt="">
  </a>
</div>

#documents_joints.menu a:nth-of-type(2) img {}


et pour
<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
  </a>
</div>

#documents_joints.menu a img:nth-of-type(2) {}

Modifié par _laurent (05 Jul 2022 - 14:06)
Je suis bien dans le cas :

<div id="#documents_joints" class="menu">
  <a href="">
    <img src="" alt="">
  </a>
  <a href="">
    <img src="" alt="">
  </a>
  <a href="">
    <img src="" alt="">
  </a>
</div>

donc
#documents_joints.menu a:nth-of-type(2) img {}


D'ailleurs voici le code de la boucle :
<div class="menu" id="documents_joints">
                        <BOUCLE_documents_images(DOCUMENTS) {id_article}{extension==jpg|png|gif}{mode=image}{par num titre, date}>
                            [<a href="#URL_DOCUMENT">(#FICHIER|image_reduire{550})</a>]
                        </BOUCLE_documents_images>
                </div>
En supprimant tous les liens, et en ayant la règle 
#documents_joints.menu img:nth-of-type(2) {
  border-radius: 55%;
}

cela fonctionne.
Sujet clos
Aller à