2017-09-05 1 views
0

Je le code CSS suivant pour obtenir les quatre dernierscss sélectionner quatre derniers si le dernier élément est multiple de quatre, si multiple de 3 les 3 derniers

:nth-last-child(-n+4){border-bottom: none;} 

et il me renvoie ce résultat:

enter image description here

En cela, tous les quatre enfants n'ont pas la bordure inférieure

mais, si le dernier élément est multiple de 3, il vient à la ligne précédemment.

enter image description here

Ce que j'ai besoin est:

  1. lorsque le dernier élément est multiple de 3, sélectionnez uniquement les 3 derniers enter image description here
  2. lorsque le dernier élément est multiple de 2, sélectionnez uniquement le dernier 2 enter image description here

Aussi, cela doit être en css pur. Est-ce que quelqu'un sait comment y parvenir?

Répondre

1

Cela prendra des sélecteurs assez alambiquée pas contrairement à ceux trouvés here, mais il peut être fait:

:first-child:nth-last-child(4n) ~ :nth-last-child(-n+4), 
:first-child:nth-last-child(4n+3) ~ :nth-last-child(-n+3), 
:first-child:nth-last-child(4n+2) ~ :nth-last-child(-n+2) { 
    border-bottom: none; 
} 
0

Au lieu d'utiliser en bas de la frontière,

Je pense que vous devriez changer en haut de la frontière, il est approprié dans votre cas.

+1

Non, ce n'est pas - si les frontières inférieures ont été changées en haut frontières, il n'y aurait pas de frontières fond pour la deuxième rangée d'éléments qui n'ont aucun élément en dessous. – BoltClock