28133 sujets

CSS et mise en forme, CSS3

bonjour,

sur mes dizaines de centaines de fiches joomla (avec du HTML que je souhaite ne pas reprendre !) et de lien sous la forme suivante,

<ul>
<a href="monFichier.pdf">Libellé du pdf<span class="ref-interne">BTA3708</span></a><span class="poids-fichiers">Poids</span> : 470Ko<br><span class="fic-date">20/09/2022</span>
</ul>


je cherche sans retoucher le HTML (trop chronophage, à cadrer le span "ref-interne" uniquement, à droite.

Quelqu'un saurait il m'aider en CSS pour ca ?

Avec tous mes remerciements

Lien vers mon codepen :
https://codepen.io/seb-lh/pen/ZEMPOPp
Modifié par slhuilli (27 Mar 2023 - 18:26)
Modérateur
Salut,


.ref-interne{
  border: 1px solid #000;
}


Sinon Smiley hum

<ul>
    <a href=""></a>
</ul>

Modifié par niuxe (27 Mar 2023 - 18:37)
Oups si j'oublie le principal :

La question est comment cadrer à DROITE sans retoucher le HTML le span ref-interne ?

Désolé, je croyais que la description était claire, désolé
Modérateur
Bonjour

.ref-interne {position:absolute;right:0;}


Sur le codePen, ça le fait, mais dans la vraie vie, il y a surement d'autres contraintes.

Amicalement,
Je ne suis pas sûr d'avoir bien compris : il faut que le lien passe tout à fait à droite ?
ul:has(> a[href$=".pdf"]) {
  display: flex;
}
a[href$=".pdf"] {
  order: 1;
}

J'ai fait un truc un peu tordu parce que le <ul> ne comporte pas de classe, j'ai donc fait en sorte de ne cibler que les ul ayant un lien direct avec ".pdf" dedant.

Ce qui en soit est faux déjà : l’élément enfant d'un <ul> devrait toujours être un <li>.

Edit : grillé par parsimonhi, et sa solution est sans doute meilleure, car moi je cible tout le lien. En reprenant sa solution :
ul:has(> a[href$=".pdf"]) { /* ce sélecteur ne fonctionne pas encore sous Firefox */
  position: relative;
}
.ref-interne {
  position: absolute;
  right: 0;
}

Modifié par Olivier C (27 Mar 2023 - 18:54)