Styler les "images liens" differemment des "liens texte

Bonjour, je me heurte à un petit problème, et je sens que je cherche une réponse trop complexe, je soumet donc mon problème ici au cas où quelqu'un aurait une idée sur la manière de procéder.

alors voilà, sur mon blog, j'ai utilisé la pseudo class ":after" combinée au selecteur a[href $='.jpg'] pour ajouter "jpg" à la fin de chaque lien vers une image jpg. Jusque là ça marche parfaitement, même trop parfaitement

effectivement, quand le lien est en fait une miniature vers l'image originale, il n'y a pas besoin d'afficher l'extension "jpg" à la fin du lien, et en plus ça fait moche (exemple)

Je veux donc que ce "jpg" disparaisse qaund le lien est une image. j'ai tenté de sélectionner le lien avec un truc du style a>img mais sans résultats.

voilà le code qui style les liens vers un jpg:

.post-content a[href $='.jpg']:after {
		vertical-align:5px;
		margin:0 0 0 3px;
		content: "jpg";
		font-size:60%;
		color:#E0FF03;
		}

et voilà comment j'ai tenté d'y remédier pour les liens contenant des images (en essayant dans un premier temps d'afficher "test" pour voir si ça marchait)

.post-content a>img:after {
		vertical-align:5px;
		margin:0 0 0 3px;
		content: "test" !important;
		font-size:60%;
		color:#E0FF03;
		} 	

Si vous avez la moindre idée de procéder, dites le moi car j'ai l'impression que je me prend la tête pour rien et que la solution est plus simple que ce que je cherche à faire.

question annexe: quelles sont les expressions régulières qui fonctionnent dans les selecteurs, pour par exemple dire "ne contenant pas" etc.. ? si quelqu'un à une liste, je suis preneur.

Merci !

yosh a écrit :

question annexe: quelles sont les expressions régulières qui fonctionnent dans les selecteurs, pour par exemple dire "ne contenant pas" etc.. ? si quelqu'un à une liste, je suis preneur.

5.8 Les sélecteurs d'attribut sous réserve que cela fonctionne plus ou moins dans quelques navigateurs graphiques et que ce type de contenu généré ne doit pas être porteur d'une information indispensable à la compréhension, puisque dans bien des situations il ne sera pas généré

merci j'étais tombé sur cette liste en faisant mes recherches avant de poser la question, mais je la trouvais incomplète car il manque la description des possibilitées telles que [attr $='test'] ou [attr ^='test'] je me demandais si il existait des formes telles que [attr !='test'] (pour la négation) ou autres regex utilisables.

sinon pour mon premier problème, une petite idée ?

Bonsoir,

Je pense pour ma part que tu as compliqué le problème.

Pourquoi tout simplement ne pas faire ça:

.post-content a img:after{
  content: " ";
}

Je pense que ça devrait annuler le "jpg" qui s'affiche. Essais en mettant rien, ou avec un espace, qui sait? Il y a peutêtre une propriété

content:hidden;

Je ne sais pas si ça marche. Il faut essayer. Ceci dit C'est une propriété
css 2 et ça n'est malheureusement pas compatible partout comme disait Igor. Mais c'est un autre problème.

Bon courage bonsoir

merci pour ta réponse mais j'avais aussi essayé ça sans résultats...

Humhum...

Si je puis me permettre, pourquoi faire aussi compliqué?

Si je comprends bien tu génères des vignettes qui pointe vers d'autres images, mais tu veux quand même affichier le ".jpg" à la suite des liens texte qui pointe vers images?

Pourquoi ne pas faire tout simplment une classe adaptée ?

et ben en fait c'est un blog géré par dotclear, je n'ai donc pas la main sur les class qu'il insère. Je pourrai ajouter une classe spéciale à chaque lien image, mais je trouve cette solution assez lourde et pas du tout automatique.

Mon problème est juste de trouver le bon selecteur pour dire "les liens contenant des images situés dans le contenu du message", c'est surtout là dessus que je sèche.

Bonjour,

En CSS, il n'existe pas de sélecteur permettant d'atteindre un élément en fonction de ses descendants.

Cela dit, on évite les liens directs vers des images. Le système que tu utilises est en fait très mal conçu (l'url du lien devrait être une page HTML, et le script devrait récupérer l'url de l'image par un autre biais, par exemple le passage en paramètre GET)
Modifié par Laurent Denis (30 Sep 2007 - 12:55)

...dommage, tant pis, je vais essayer de trouver une autre solution.

pour l'histoire du lien vers un jpg, je ne vois pas en quoi "c'est mal" vu qu'une fois que le contexte est placé et l'attribut alt renseigné sur la vignette, le déficient visuel saura très bien de quoi il s'agit. Ajouter une page html gène au contraire l'ergonomie. Mais peut être me plante-je