Cibler un élément particulier
Résolu
Ysabe_l
Messages postés
12714
Date d'inscription
Statut
Contributeur
Dernière intervention
-
Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention -
Ysabe_l Messages postés 12714 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'ai une page avec des données récupérées en php.
Sa structure est la suivante :
1. Je voudrais c'est cibler chaque div "contenu" pour lui mettre un background différent.
J'ai essayé en CSS avec un
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.
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.
A voir également:
- Cibler un élément particulier
- Meilleur site de vente entre particulier - Guide
- Open element - Télécharger - HTML
- Annuaire espagne gratuit particulier - Forum Mobile
- Whatsapp répondre à un message en particulier - Guide
- Recherche un numero telephone fixe espagnol recherche une perso ✓ - Forum telephonie fixe
3 réponses
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 :
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)
Ysabe_l
Messages postés
12714
Date d'inscription
Statut
Contributeur
Dernière intervention
277
Ah je savais bien qu'il y avait un truc ! Merci je teste ça dans l'après midi.
Ysabe_l
Messages postés
12714
Date d'inscription
Statut
Contributeur
Dernière intervention
277
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.
sinon en jquery :
$(function(){
$('.contenu').each(function(){
$(this).css("background-image", "url('tonimage.jpg')");
});
});
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.
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.
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>
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.
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.
