Eine erste und letzte Klasse zu Wordpress 'Widget Inhalt hinzufügen

Question

In Wordpress suche ich nach einer Möglichkeit, eine "letzte" und eine "erste" Klasse hinzuzufügen, um Elemente in Wordpress-Widgets aufzulisten. Der HTML-Code könnte wie folgt aussehen:

<div class="widget-area"> 
<ul > 
    <li class="widget_recent_comments"> 
     <h3 class="widget-title">Recent comments</h3> 
     <ul id="recentcomments"> 
      <li class="recentcomments">Comment 1</li> 
      <li class="recentcomments">Comment 2</li> 
      <li class="recentcomments">Comment 3</li> 
      <li class="recentcomments">Comment 4</li> 
     </ul> 
    </li> 
    <li class="widget_my_links"> 
     <h3 class="widget-title">My links</h3> 
     <ul id="my-links"> 
      <li class="item">Link 1</li> 
      <li class="item">Link 2</li> 
      <li class="item">Link 3</li> 
      <li class="item">Link 4</li> 
      <li class="item">Link 5</li> 
     </ul> 
    </li> 
</ul></div> 

In diesem Beispiel oben i mit „1 Kommentar“ zu dem li hinzugefügt ersten/letzten Klassen haben möge, „Kommentar 4“, „Link-1“ und „Link 5 ".

Gibt es dafür einen einfachen Workaround? (Ich möchte dies nicht mit Javascript tun)

Vielen Dank.

Answer 1

Ich vermute, diese Listen werden in einer Schleife generiert. Sie können also eine Variable erstellen, bevor Sie in die Schleife wechseln, und ihren Wert auf 1 setzen ($ i = 1). Als am Ende der Schleife, fügen Sie eins nach oben ($ i ++). Jetzt, wo Sie die erste/letzte Klasse angezeigt werden sollen, können Sie

<?php if($i == 1): 
    echo ' first'; 
elseif($i == $number_of_items) 
    echo 'last'; 
endif;  
?> 

Bei $ i == $ NUMBER_OF_ITEMS tun, können Sie den max mit dem aktuellen vergleichen, so dass Sie wissen, dass Sie die letzten, wenn die Aussage ist wahr.

Hoffe das beantwortet Ihre Frage.

Answer 2

Nun, der erste Punkt ist einfach, benutzen Sie einfach

ul#my-list li:first-child { 
    /* special styles */ 
} 

Es ist nicht eine Klasse hinzufügen, aber Sie können es immer noch Stil. Es gibt keine ähnliche CSS-Regel für :last-child leider