CSS Dernier Impair Enfant?

J'ai une liste non ordonnée, qui peut contenir un nombre pair ou impair d'éléments. Je suis à la recherche d'un CSS seule façon de le supprimer de la frontière à partir de la dernière 2 li balises si le nombre de lis est même. Le :last-child pseudo-sélecteur supprime le dernier un peu. 

li {
float: left;
border-bottom: 1px solid #000;
}

li:last-child{
border-bottom: none;
}

Fonctionne pour un Nombre Impair de lis

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |                      +
+============================================+

Mais pour un nombre pair, j'ai besoin d'enlever le fond de la cellule #3

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |          4           +
+---------------------                       +
+============================================+

Alors j'ai pensé que je pourrais utiliser li:nth-last-child() mais je ne peux pas déterminer quelle devrait être l'équation pour attraper le dernier impair enfant.

Ce n'est pas 2n+1, 2n-1, n-1, ou quoi que ce soit je pense. S'il vous plaît aider.

  • LOL @ vos modifier
InformationsquelleAutor KyleWpppd | 2011-12-27
  1. 75

    nth-last-child compte à rebours à partir de la dernière enfant, afin de saisir la seconde à la dernière, l'expression est:

    li:nth-last-child(2)

    Vous pouvez combiner des pseudo-sélecteurs, afin de sélectionner le 2ème et dernier enfant, mais seulement lorsque c'est bizarre, utilisation:

    li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

    Et donc, toute chose doit être:

    li:last-child,
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

    En réponse à @ithil la question, voici comment j'allais l'écrire dans SASS:

    li
  &:last-child,
  &:nth-last-child(2):nth-child(odd)
    border-bottom: none

    Ce n'est pas beaucoup plus simple, puisque la sélection de "l'avant-dernier impair enfant" est toujours exiger le "two step" sélecteur.

    En réponse à @Caspert de la question, vous pouvez le faire arbitrairement beaucoup de derniers éléments en regroupant plusieurs sélecteurs (il se sent comme il devrait y avoir quelques xn+y motif de le faire sans que le regroupement, mais AFAIU ces habitudes de travail juste en comptant à rebours à partir du dernier élément).

    Pour les trois derniers éléments:

    li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}

    C'est un endroit où quelque chose comme SASS peut aider, pour générer les sélecteurs pour vous. Je voudrais structure présente comme un espace réservé à la classe, et d'étendre l'élément avec elle, et définir le nombre de colonnes dans une variable comme ceci:

    $number-of-columns: 3

%no-border-on-last-row
 @for $i from 1 through $number-of-columns
   &:nth-last-child($i):nth-child(odd)
     border-bottom: none

//Then, to use it in your layout, just extend:

.column-grid-list li
  @extend %no-border-on-last-row
    • autre référence ici: w3.org/Style/Examples/007/evenodd.en.html
    • C'est probablement pour quelques années de retard. Vous pouvez trouver un plus up-to-date de référence.
    • il a "DERNIÈRE mise à JOUR THU 15 DEC 2011 06:20:47 AM CET" au bas de l'article. Et basé sur w3schools.com/cssref/sel_nth-child.asp: L' :nth-child() sélecteur est pris en charge dans tous les principaux navigateurs, sauf IE8 et plus tôt.
    • TIL pseudo-sélecteurs peuvent être combinés comme des sélecteurs... je savais qu'il y avait quelque chose de j'ai été sur le plan conceptuel manquant, mais n'était pas sûr de ce qu'il était. Merci!
    • aucune idée si cette solution pourrait-elle être "simplifié" à l'aide d'un préprocesseur comme sass/less?
    • J'ai ajouté l'équivalent en SASS pour la réponse. Je n'ai pas utilisé le MOINS en temps, pas sûr de savoir comment il serait regarder en elle, ou si ce serait pas plus simple.
    • Je suis à la recherche de la même chose, mais pour les 3 derniers articles (3 colonnes de la grille)... Est-ce possible?
    • Bien sûr, @Caspert - j'ai ajouté une méthode pour la réponse.

    InformationsquelleAutor Beejamin
  2. 10

    Une autre alternative:

    li:last-child:not(:nth-child(odd))

    Ici est un violon: http://jsfiddle.net/W72nR/

    InformationsquelleAutor Andrew Odri
  3. 2

    éventuellement:

    li:nth-child(2n){border:1px dashed hotpink}
li:nth-child(2n-2), li:last-child{border:none;}
    InformationsquelleAutor Philip
  4. -2

    vous pouvez utiliser le n-ième sélecteur d'enfant:

    li:nth-child(3) { border-bottom: none;}

li:nth-child(4) {border-bottom: none;}

    Cependant, puisque ce n'est pas pris en charge dans IE 8... vous devriez vous suffit de définir une classe à ces deux li éléments et l'utilisation de la spécificité de la frontière-bas à aucun.

    • Cela ne sera jamais emparer de la 3ème ou 4ème enfant - il ne fonctionnera pas avec un nombre arbitraire d'éléments.
    • Ce n'est pas ce que l'OP est de demander.
    InformationsquelleAutor Michael Rader