28111 sujets

CSS et mise en forme, CSS3

Petit soucis avec [id^="xx"]

Bonjour à tous et à toutes,

J'essaye de m'intéresser aux nouvelles écritures en CSS, et je ne comprends pas trop un point.

Voici le code fonctionnel d'une partie d'un spoiler en pur CSS que j'utilise sur 3 spoilers (A,B et C). Quand je clique sur le texte A, le spoiler A s'affiche, mais pas B et C. Quand je clique sur B, le spoiler B s'affiche mais pas A et C. Logique me direz vous, mais je le précise quand même Smiley smile 

#isexpanded:checked ~ .expandable,  #isexpanded2:checked ~ .expandable2, #isexpanded3:checked ~ .expandable3 {
	display: block;
}


Voici ce que j'aurai aimé faire 

input[id^="isexpanded"]:checked ~ [class^="expandable"] {
	display: block;
}

Et là j'ai un comportement étrange… quand je clique sur le lien A (isexpanded1), B (isexepanded2) et C (isexpanded3) s'affichent.
Quand je clique sur le lien B, B (isexepanded2) et C (isexpanded3) s'affichent, mais pas A.
Quand je clique sur le lien C, seul C (isexpanded3) s'affiche.

Conclusion il y a un soucis Smiley lol

1) POuvez vous m'expliquer pourquoi ça déclenche les éléments à suivre et pas les précédents ?
2) je n'arrive pas à trouver à quoi correspond [id^="] dans son fonctionnement exact, pouvez vous me renseigner ?
3) Existe t il un code pour regrouper les isexpanded et expandable sans devoir les numéroter (parce que si je rajoute un spoiler je dois retoucher au code CSS alors que j'aimerai faire comme en PHP et permettre que expandable de expandable à expandable9999999999 soit pris en compte si cela est possible.

Merci de votre précieuse aide. Smiley smile
Modifié par januor (16 Oct 2018 - 23:35)
1) Ça dépend de l'ordre des éléments dans votre html et du tildé css qui cible tout ce qui suit...
2) Ce sélecteur (qui est loin d'être nouveau et qui existe depuis pas mal d'années) fonctionne selon le principe des regex. Mais avant même d'utiliser cette solution il faut déjà analyser pourquoi vous avez besoin de classes "numérotées", et même de classes tout court. Dans l'absolu seule une classe sur l'élément parent de la structure serait nécessaire (pour servir "d'espace de nom"), à partir de là on cible tout le reste.
3) Du coup il est effectivement possible de tout résumer par une seule ligne de sélecteurs pour peu que le html doit bien construit ; ne pas employer de tildé css (dans votre cas) celui-ci ciblant tous les éléments enfants ayant la classe demandée, le comportement décrit étant donc parfaitement normal.
Modifié par Olivier C (19 Oct 2018 - 17:06)
Bonjour et merci de votre intérêt à mon soucis Smiley smile

Voici le code html :

<div  id="input">
<ul>
							
<input type="checkbox" id="isexpanded1" />
 <li><label for="isexpanded1">Titre article 1</label></li>
  <div class="expandable1">
     <p>Article 1</p>	
     <p>Article 1</p>								
   </div>
								
<input type="checkbox" id="isexpanded2" />
 <li><label for="isexpanded2">Titre article 2</label></li>
  <div class="expandable2">
     <p>Article 2</p>
     <p>Article 2</p>									
   </div>
								 
<input type="checkbox" id="isexpanded3" />
<li><label for="isexpanded3" >Titre article 3</label></li>
  <div class="expandable3">
     <p>Article 3</p>			
     <p>Article 3</p>					
 </div>
								
 </ul>
</div>


Si une version plus courte et surtout me permettant de mettre article4, 5 etc sans devoir toucher au CSS, existe, je suis intéressé, car je suis depuis un moment sur ce point de ma page sans trouver de solution.

Merci Smiley smile
Bazooka07 vous a donné des codes, vous pouvez vous en inspirer et les adapter, mais n'oubliez pas non plus les éléments html <summary> et <detail>.
Meilleure solution
Bonjour,

Est ce que details et summary sont supportés par IE ?

J'ai vu que plusieurs tuto proposaient une alternative en JS si details et summary n'étaient pas supportés (navigateur obsolète). Y a t il un intérêt à faire une compatibilité descendante vu la vitesse des mises à jour des navigateurs ?

Merci pour vos réponses
Le site est en responsive. ????

Tout le dilemne... 6% c'est peu mais doit on les oublier... dans mon cas le contenu restera accessible mais ne sera pas sous la même mise en forme.
Sujet clos
Aller à