Wähle das letzte Kind, wenn es ungerade ist, 2 letzte Kinder wenn sogar

Ich bin in einer Situation, wo die Anzahl der Elemente variabel ist, und ich brauche eine seltsame Lösung, die ich nicht erreichen kann, ich bezweifle sogar, ob es erreichbar ist nur mit CSS.Wähle das letzte Kind, wenn es ungerade ist, 2 letzte Kinder wenn sogar

Ich muss die Last-Kind auswählen, wenn meine Anzahl der Elemente ungerade ist, und die letzten 2 Kind, wenn die Anzahl der Elemente gerade ist.

Ich habe mit nth-last-child, :not(:nth-last-child()), ungerade und gerade versucht, aber nie eine gute Lösung bekommen.

Jeder hat eine Idee/Ratschläge zu diesem Thema ein Teil des Hinzufügens einer Klasse "ungerade" wie auf HTML-Tabellen?

Vielen Dank im Voraus!

Quelle

2015-04-21 agapitocandemor

Hier ist ein Weg, ...

.wrap div:last-child, 
 
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) { 
 
    color: red; 
 
}

<div class="wrap"> 
 
    <div>Odd</div> 
 
    <div>Even</div> 
 
    <div>Odd</div> 
 
    <div>Even</div> 
 
    <div>Odd</div> 
 
    <div>Even</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="wrap"> 
 
    <div>Odd</div> 
 
    <div>Even</div> 
 
    <div>Odd</div> 
 
    <div>Even</div> 
 
    <div>Odd</div> 
 
</div>

Quelle

2015-04-21 11:34:23 Turnip

Perfekt, vielen Dank! – agapitocandemor

CSS können Sie wie folgt:

li:last-child:nth-child(odd) { 
    /* Last child AND odd */ 
    background: red; 
} 

li:nth-last-child(2):nth-child(odd), 
li:last-child:nth-child(even) { 
    /* Before last child AND odd */ 
    /* Last child AND even */ 
    background: green; 
}

Demo: https://jsfiddle.net/hw0ehrhy/

Quelle

2015-04-21 11:32:03 Bluety

Dieser Code auch perfekt funktioniert !! Aber die Antwort ist kürzer, das ist einen Punkt besser. Vielen Dank für Ihre Hilfe! – agapitocandemor

-4

Absolut es kann getan werden mit reinem CSS. Siehe den vollständigen Code (ungeradees Kind, letztes Kind rot, auch Childs, zuletzt 2 Kinder grün)

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('#but1').click(function(){ 
      var count = $('p').length; 
      if (count%2!=0) {$('div>p:last-child').css('background','red');} 
      else {$('div>p:last-child').css('background','green');alert(count); 
       $('div>p:nth-last-child(2)').css('background','green'); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<button id=but1>Click</button> 
<div> 
<p>This is one.  </p> 
<p> This is two. </p> 
<p> This is three. </p> 
<p> This is four. </p> 
<p> This is five. </p> 
<p> This is six. </p> 
</div> 
</body> 
</html>

Genießen Sie die Codierung;)

Quelle

2015-04-21 11:40:53 Deadpool

Wie ist das "pure CSS"? – Vucko

Ja, jquery beteiligt! Aber, hieß es -1 Repo! :( – Deadpool

Ja, ich war auf der Suche nach einer einzigen CSS-Lösung, keine js oder jq. Danke für Ihre Antwort trotzdem! – agapitocandemor

Wähle das letzte Kind, wenn es ungerade ist, 2 letzte Kinder wenn sogar

Antwort

Verwandte Themen