2
votes

comment sélectionner les 4 derniers éléments en utilisant nième enfant?

Je souhaite sélectionner les 4 derniers éléments en utilisant nth-child. Y a-t-il un moyen de faire cela?

Je ne suis pas en mesure d'ajouter des classes uniques à ces enfants, j'ai donc besoin d'un moyen de pouvoir identifier quels sont les 4 derniers enfants afin de pouvoir les éditer sans affecter les autres?

J'utilise des champs personnalisés avancés pour Wordpress, donc mon code ressemble à ceci:

<div class="all-skills-div">
            <?php
                if( have_rows('skills') ):
                while( have_rows('skills') ):
                the_row();
            ?>
                <div class="single-skill-div">
                   <?php echo the_sub_field('a_skill'); ?>
                </div>
            <?php 
                endwhile;
                endif;
            ?>
</div>

Le sous-champ génère environ 9 lignes de texte différentes (pour le moment mais cela pourrait changer car il est dynamique) donc je veux cibler les 4 derniers.

Toute aide serait appréciée.

Merci

jquery css css-selectors sass

0 commentaires

4 Réponses :

1
votes

Vous pouvez le faire comme ceci,

$('#something a:nth-last-child(-n+4)').hide();

0 commentaires

6
votes

Essayez-le:

<ul>
  <li>1</li>  
  <li>2</li>  
  <li>3</li>
  <li>4</li>  
  <li>5</li>  
  <li>6</li>  
  <li>7</li>  
  <li>8</li>  
  <li>9</li>  
</ul>

ul li {
  display: inline-block;
  width: 100%;;
}

ul li:nth-last-child(-n+4) {
  color: red;
}

2 commentaires

Veuillez fournir du code HTML et CSS ou jsfiddle. Alors, je peux vous aider.

Je l'ai fait fonctionner maintenant grâce à votre suggestion! Merci beaucoup. Je n'ai pas pu trouver ce que je cherchais sur Google en cherchant :)

1
votes

vous pouvez utiliser CSS #something: nth-last-child (-n + 4) pour les quatre derniers sous-champs.

0 commentaires

1
votes

Vous pouvez utiliser nth-last-child - nième générateur

0 commentaires