Cibler un élément particulier

Résolu/Fermé
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 - 16 déc. 2013 à 22:42
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 - 17 déc. 2013 à 17:34
Bonjour,

J'ai une page avec des données récupérées en php.

Sa structure est la suivante :

<div id="contenant">
	<h2>titre</h2>
	<?php
	while ($a = $request->fetch())
	{
	?>
		<div class="contenu">
			<img src="img/<?php echo $a['icone']; ?>.png" alt="<?php echo $a['icone']; ?>" />
			<div class="texte">
				<?php echo $a['texte']; ?>
			</div>
		</div>
	<?php
	}
	?>
</div>


1. Je voudrais c'est cibler chaque div "contenu" pour lui mettre un background différent.

J'ai essayé en CSS avec un

.contenu:first-child


pour déjà arriver à cibler le premier ... mais ça ne fonctionne pas.

Je pense qu'il faut le faire en JavaScript (ou Jquery puisque le reste du site est avec JQuery) mais je ne vois pas comment.

2. Je voudrais cibler une div "contenu" sur deux pour lui mettre une class spécifique. Et là je sais que c'est possible mais impossible de me souvenir comment.

J'ai dans l'idée de leur mettre un ID croissant en utilisant une variable qui sera incrémentée à chaque boucle de php créant une de ces div et ensuite en JavaScript de mettre une class pour les ID pairs et une autre pour les ID impairs. Est-ce que je suis sur la bonne piste ?

Voilà si quelqu'un pouvait m'aider ce serait super ! Merci d'avance.

3 réponses

Cocolabaloune Messages postés 53 Date d'inscription mercredi 27 mai 2009 Statut Membre Dernière intervention 16 septembre 2015 5
17 déc. 2013 à 01:27
Bonjour,

Je ne crois pas qu'il serait nécessaire d'utiliser le javascript pour parvenir à vos fins.

Il est possible de sélectionner les éléments pairs et impairs avec ces pseudos sélecteurs CSS :

:nth-of-type(even)
:nth-of-type(odd)
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 10:19
Ah je savais bien qu'il y avait un truc ! Merci je teste ça dans l'après midi.
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 17:03
Super, j'ai pu réussir du premier coup (enfin le temps de tester lequel était pair et lequel impair). Je le note dans mon carnet des "trucs" pas souvent utilisés mais super utiles.
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
17 déc. 2013 à 10:31
sinon en jquery :



            $(function(){
                $('.contenu').each(function(){
                    $(this).css("background-image", "url('tonimage.jpg')");
                });
            });
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 12:54
Bonjour,

Oui mais là ça va mettre le même fond à toutes les div de la class "contenu", ce que je cherche à faire c'est que chacune ait un fond différent justement.
Et je ne peux pas cibler l'ID puisque je ne sais pas combien il y aura de div, celles-ci étant récupérées en php et donc dépendent du nombre d'entrées dans la base de données.

Ce que je veux c'est par exemple :
La première en rouge
La seconde en bleu
La troisième en vert
La quatrième en orange
La cinquième en violet
Et si il en a encre on recommence le cycle des couleurs.
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
17 déc. 2013 à 12:56
J'ai mis ce code juste pour montrer comment atteindre tous tes divs.

Dedans, tu fais ce que tu veux, tu peux faire un compteur pour attribuer la couleur de ton choix.
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 16:53
Heu oui pardon j'avais pas réfléchi, c'est vrai qu'en y ajoutant une variable là dedans ça va pouvoir faire ce que je veux.

Merci.
0
enqueteactualite Messages postés 70 Date d'inscription mercredi 11 décembre 2013 Statut Membre Dernière intervention 16 mai 2015 16
17 déc. 2013 à 15:48
voilà un exemple de ce que tu souhaite faire :

<div id="contenant">
	<h2>titre</h2>
	<?php
	$i = 0;
	$colors[0] = '#000';
	$colors[1] = '#001';
	$colors[2] = '#002';
	$colors[3] = '#003';
	while ($a = $request->fetch())
	{
	?>
		<div class="contenu" style="background-color:<?php echo $colors[0];?>">
			<img src="img/<?php echo $a['icone']; ?>.png" alt="<?php echo $a['icone']; ?>" />
			<div class="texte">
				<?php echo $a['texte']; ?>
			</div>
		</div>
	<?php
	$i++; if($i==4) $i=0;
	}
	?>
</div>
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 16:53
Merci beaucoup !

Je vais regarder tout ça ce soir, mais en effet dit comme ça bah ça semble très logique.
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
17 déc. 2013 à 16:55
Ce que j'essayais de te proposer était un peu similaire, mais en jquery.
C'est vrai qu'il n'y a pas vraiment d'intérêt à faire ça à part en js alors qu'on peut le faire à la volée en php.
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 17:02
Oui de toute manière la logique reste la même, c'est mieux en php parce que si javascript est désactivé ça marche aussi.

Mais là avec l'explication j'ai honte de ne pas avoir trouvé seule.
0
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
17 déc. 2013 à 17:05
^^
C'est mieux de centraliser les traitements, si tu peux tout faire en php, inutile d'aller utiliser le JS, sauf si c'est beaucoup plus rapide éventuellement.
Même chose en sql, tous les traitements que tu peux éviter de faire en php en les faisant en sql, il faut les faire.
0
Ysabe_l Messages postés 12562 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 11 octobre 2024 276
17 déc. 2013 à 17:21
Oui c'est vrai. Mais comme je suis pas fan de mettre le style dans la balise div je n'y avais même pas pensé. Mais dans un cas comme ça bah ça fait quand même plus propre, je comprends pourquoi des fois on trouve des style dans les balises sur certains sites alors qu'ils sont bien codés ^^.

Bon du coup ça marche parfaitement, j'ai un peu adapté à ce que je voulais et c'est parfait (et modifié le style="background-color:<?php echo $colors[0];?>" en style="background-color:<?php echo $colors[$i];?>").

Encore merci beaucoup.
0