Problème de sélecteur CSS3

Bonjour,

CONTEXTE :

Soient le code html suivant :

<p class="miniMenu">
	<img src="img/minilogo-photo.png" alt="/photo/" />
	<img src="img/minilogo-audio.png" alt="/audio/" />
	<img src="img/minilogo-video.png" alt="/video/" />
</p> 

<p class="miniMenu">
	<img src="img/minilogo-audio.png" alt="/audio/" />
	<img src="img/minilogo-video.png" alt="/video/" />
</p> 

et un code css3 associé :

.miniMenu img[alt="/photo/"] + img[alt="/audio/"]{/* au sein des <p> de classe "miniMenu", pointe l'<img> minilogo audio lorsqu'elle est précédée de l'<img> minilogo photo*/
	
	width:100px;
	position:relative;
	left:-0.2rem;	/*décale légèrement l'<img>vers la gauche pour des questions ésthétiques*/
}

Jusqu'ici tout fonctionne très bien, le minilogo audio n'est décalé que lorsqu'il est précédé du minilogo photo.

Pour info, ces <p> sont des "minimenus" ; il y a de nombreux autre <p> avec cette structure, chacun correspondant à un projet audiovisuel, qui peut comporter photo et/ou audio et/ou vidéo, d'où la présence d'une à trois <img>selon les cas.

ÇA SE CORSE :

J'insère ensuite des <a> autour de chaque <img> afin que celles-ci pointent sur des liens.
Ce qui donne le code html suivant :

<p class="miniMenu">
	<a href="photo_projet1.html"><img src="img/minilogo-photo.png" alt="/photo/" /></a>
	<a href="audio_projet1.html"><img src="img/minilogo-audio.png" alt="/audio/" /></a>
	<a href="video_projet1.html"><img src="img/minilogo-video.png" alt="/video/" /></a>
</p>

<p class="miniMenu">
	<a href="audio_projet2.html"><img src="img/minilogo-audio.png" alt="/audio/" /></a>
	<a href="video_projet2.html"><img src="img/minilogo-video.png" alt="/video/" /></a>
</p>

LE PROBLEME :]

Dès lors la sélection CSS ne fonctionne plus, car les <a> viennent "parasiter".

Comment alors réaliser le même type de sélection "conditionnelle" que j'avais réussie à faire en CSS lorsque les balises <a> ne venaient pas s'interposer entre mes <img> en m’empêchant ainsi de jouer avec le sélecteur "+" ?

>> Précisions :
- je ne souhaite pas recourir au DOM via javascript, je voudrai rester en pur CSS à ce niveau.
- l'utilisation d'id ne me semble pas pertinente car je veux un code CSS générique qui s'appliquera chaque fois que je rajouterai de nouveaux paragraphes avec cette structure

Merci d'avance de votre aide.

Bonne journée,

D.
Modifié par DYeDO (14 Dec 2013 - 11:48)

Bonjour,

premièrement, les alt sont une alternative textuelle, utilisées lorsque l'on ne peut afficher l'image. (Pour des raisons techniques ou d'accessibilité). Il faudrait donc retirer les / / autour qui gênent leur lecture.

Ensuite il suffit de faire la sélection adjacente sur les liens.

<a class="photo" href="photo_projet1.html"><img src="img/minilogo-photo.png" alt="photo" /></a>
<a class="audio" href="audio_projet1.html"><img src="img/minilogo-audio.png" alt="audio" /></a>
<a class="video" href="video_projet1.html"><img src="img/minilogo-video.png" alt="vidéo" /></a>

.miniMenu .photo + .audio a {
  /* blah blah */
}

p.s: Pour des listes, on utilise généralement ul au lieu de p, qui n'est pas adapté à ce contexte.

Eh ben tout simplement !
Merci !!

Je vais tester ça après manger.

Et je vais aussi voir à transformer mes p en ul ; en effet, ça semble logique !