28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je souhaiterais sélectionner uniquement les <li> n°2, 3, 4, 5 présents dans la balise <ul>. J'en ai au total 7 dans cette balise.
Voici mon code :

<ul>
 <li class="menu-saison"><a href="#">Saison</a></li>
 <li class="menu-agenda"><a href="menus/agenda.php">Agenda du club</a></li>
 <li class="menu-medias"><a href="#">Médias</a></li>
 <li class="menu-partenaires"><a href="menus/partenaires.php">Partenaires</a></li>
 <li class="menu-matches"><a href="menus/matches.php">Gestion matches</a></li>
 <li class="menu-incidents"><a href="#">Gestion incidents</a></li>
 <li class="profile"><a href="menu-profile.php">MON PROFIL</a></li>
</ul>


Sauriez-vous comment je pourrais procéder (sans forcément utilise le sélecteur de classe) ?
Merci d'avance Smiley smile
Modifié par Titouan79 (07 Apr 2019 - 18:34)
Olivier C a écrit :
ul > :nth-child(2),
ul > :nth-child(3),
ul > :nth-child(5),
ul > :nth-child(5) {
    /* mon code css */
}

Merci. Je souhaiterais aussi savoir s'il est possible d'utiliser la pseudo-classe ":not" pour ne pas sélectionner les <li> n°1 et 7. Si oui, pouvez-vous m'indiquer comment le faire ? Merci d'avance
Modifié par Titouan79 (07 Apr 2019 - 19:13)
Administrateur
Titouan79 a écrit :

Merci. Je souhaiterais aussi savoir s'il est possible d'utiliser la pseudo-classe ":not" pour ne pas sélectionner les &lt;li&gt; n°1 et 7. Si oui, pouvez-vous m'indiquer comment le faire ? Merci d'avance

Hello,

li:not(:nth-child(1)):not(:nth-child(7)) {
    /* mon code css */
}
En poussant le bouchon, on peut ajouter aussi que s'il s'agit de ne jamais sélectionner le premier et le dernier item, quelque soit le nombre d'éléments frères, alors vous pouvez aussi utiliser :first-child et :last-child :
li:not(:first-child):not(:last-child) {
  /* mon code css */
}

Buena noche.
Merci beaucoup pour vos réponses Smiley biggrin !

Bonne nuit à vous aussi Smiley smile
Modifié par Titouan79 (07 Apr 2019 - 21:56)