28172 sujets

CSS et mise en forme, CSS3

[Résolu] Simuler un sélecteur parent dans a > img (comme a < img

Bonjour,

Je souaiterais agir sur le sélecteur "a" lorsqu'il est suivi de "img".

A la lecture de ceci, j'ai bien compris que ça n'existait pas, mais y aurait-il une astuce ?

Il s'agirait de la déclaration "background-image: none;".

Merci et meilleures salutations.
Modérateur
Hello,

En Javascript si tu n'as pas le contrôle sur ton texte en ajoutant une class. Sinon, une bonne vieille class.

ps :
Il me semble que c'est prévu pour le CSS4 (j'avais lu quelque chose à ce sujet il y a pas mal de temps). Mais pour le moment, faut oublier.

ça devrait être un truc comme : 

element > $elementParent > enfant{
....
}


<<<EDIT
en bas du tableau...
Selectors Level 4 (overview)
EDIT;
Modifié par niuxe (13 Sep 2017 - 02:14)
salut,
je ne sais pas si c'est possible et à ma connaissance j'en doute mais tu devrais peut être voir une contrainte différente qui répondrait à tes critères.
Si non en dernier recours et comme le propose niuxe , tu peux passer par du JS
Bonjour,
Pourquoi ne pas mettre le background sur l'enfant du lien et non sur le lien lui-même ?
Smiley sweatdrop
Modérateur
Bonjour,

ygirodA la lecture de http://https://css-tricks.com/parent-selectors-in-css/ a écrit :
ceci[/url, j'ai bien compris que ça n'existait pas, mais y aurait-il une astuce ?

Comme tu viens de le dire ça n'existe pas. Si il y avait eu une astuce elle serait dans l'article et du coup ça existerait ! Smiley langue

Apres tu peux toujours tricher visuellement c'est a dire placer les <img> avant les <a> dans le HTML mais faire en sorte que visuellement l'img vienne apres (avec un float par exemple, ou un flex inversé). De cette façon tu pourras changer le <a> quand il est suivi d'un <img> alors que visuellement ça sera l'inverse. Mais bon c'est pas ouf comme solution et c'est sale, pas super maintenable ni compréhensible et dur a mettre en place de façon générique.

Selon tes besoin je penche pour la meme solution que Zelalsan et rédéfinir un peu ce que tu veux faire pour trouver un autre moyen d'y arriver (jouer avec l'état du parent commun etc etc...)
a écrit :
Bonjour,

Je souaiterais agir sur le sélecteur "a" lorsqu'il est suivi de "img".

A la lecture de ceci, j'ai bien compris que ça n'existait pas, mais y aurait-il une astuce ?

Il s'agirait de la déclaration "background-image: none;".

Merci et meilleures salutations.

Ce n'est pas pour tout de suite, mais, pour info, c'est prévu en CSS4. Je vais rechercher le ou les articles que j'ai pu lire sur le sujet.
Bonjour
Moi aussi j'ai rêvé d'avoir ce genre de sélecteur CSS, mais avec mon âge et mon état de santé, je suis pratiquement sûr que je n'aurai jamais à l'utiliser. Même si par chance il est implémenté dans certains navigateurs dans les prochaines années, le temps que ce soit généralisé...

Je pense que nous avons oublié le principal: qu'est-ce que tu veux obtenir?
<a>...</a><img...> ça représente quoi du point de vue de l'utilisateur?

On peut très vraisemblablement trouver une autre façon de représenter cet "objet" si on comprend ce qu'il représente en pratique et dans quel contexte tu comptes l'utiliser.
En général une image accompagnée de quelque chose, ça se représente sous forme d'une 

<figure>
    <figcaption><a>....</a></figcaption>
    <img....>
</figure>

En mettant une classe adéquate dans <figure> ou <figcaption>, on peut styler le <a> sans problème.
Administrateur
ygirod a écrit :
Je souaiterais agir sur le sélecteur "a" lorsqu'il est suivi de "img".

En fait, j'avais mal lu au départ (et je crois que tous les autres aussi). Tu ne cherches pas un sélecteur de parent, mais un sélecteur d'adjacente. En gros tu cherches l'inverse de du sélecteur "+" ou "~".

Du coup, ce serait plutôt 
a:has( + img) {}


Mais comme le dit PapyJP, il vaudrait peut-être mieux tenter de trouver une alternative en terme de structure. Sinon il reste la solution JavaScript.
Sujet clos
Aller à