Wybierz ostatnie dziecko, gdy nieparzyste, 2 ostatnie dziecko, nawet jeśli

Jestem w sytuacji, w której liczba pokazanych elementów jest zmienna, i potrzebuję dziwnego rozwiązania, którego nie jestem w stanie osiągnąć, nawet wątpię, czy jest to możliwe tylko z css.Wybierz ostatnie dziecko, gdy nieparzyste, 2 ostatnie dziecko, nawet jeśli

Muszę wybrać ostatnie dziecko, jeśli moja liczba elementów jest nieparzysta, a ostatnie 2 dziecko, jeśli liczba elementów jest parzysta.

Próbowałem z nth-last-child, , dziwne i równomierne, ale nigdy nie dostałem dobrego rozwiązania.

Ktoś ma jakiś pomysł/poradę na temat tego problemu, dodając klasę "nieparzystą" na tablicach html?

Bardzo dziękuję z góry!

Źródło

2015-04-21 agapitocandemor

Oto jeden sposób ...

.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>

Źródło

2015-04-21 11:34:23 Turnip

Doskonały, wielkie dzięki! – agapitocandemor

Można użyć CSS tak:

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/

Źródło

2015-04-21 11:32:03 Bluety

Ten kod działa również doskonale !! Ale odpowiedź jest krótsza, o jeden punkt lepszy. Bardzo dziękuję za pomoc! – agapitocandemor

-4

Absolutnie nie można zrobić , z czystym CSS. Zobacz pełną poniższy kod (nieparzyste dziecko, ostatnie dziecko czerwony, nawet dzieciaki, ostatnie 2 Childs zielony)

<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>

Enjoy, kodowanie;)

Źródło

2015-04-21 11:40:53 Deadpool

Jak to jest "czysty CSS"? – Vucko

Tak, jquery zaangażowane! Ale czy to oznaczało -1 repo! :( – Deadpool

Tak, szukałem tylko rozwiązania css, js lub jq. Dzięki za odpowiedź tak! – agapitocandemor

Wybierz ostatnie dziecko, gdy nieparzyste, 2 ostatnie dziecko, nawet jeśli

Odpowiedz

Powiązane problemy